Fullwidth feature image

  • migus

    (@migus)


    9 years, 6 months ago

    Hello!

    I start to think I’m failing to do the impossible thing possible, but i don’t know.
    You see, I would like to make the header/feature image/summary image on my portfolio items go wildly fullwidth like the fullwidth slider on my homepage. I’ve tried to go into content-singleportfolio.php and change place of the col-md-12 so it’s not in the container and after that customize the width. (yes, I have created a child theme, so there is nothing to worry about :-)) But no. Nothing is going well right now.

    So my question is – is it even possible? It feels like it is. I have my hopes.

    Here is the adress to the fullwidth slider (which only contains one image) : http://mmgdesign.se/iconbrands
    And here is the adress to one of the pages I want to span the image from side to side (responsive, of course): http://mmgdesign.se/iconbrands/portfolio/inter-ikea-systems/
    Thanks in advance!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Kevin

    (@jx-3p)

    9 years, 6 months ago

    Hello Migus,

    Firstly, you’ll want to go into the edit screen for the portfolio item, and set the Max Image/Slider Width to be much larger than it is. Try at least 1800px.

    Then, add this CSS to Theme Options> Advanced Settings.

    body.single-portfolio div#content {
    width: 100%;
}
body.single-portfolio .entry-content {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}
.single-portfolio article .imghoverclass {
    margin:0 -15px;
}
.single-portfolio article .imghoverclass img {
    width: 100%;
}

    This should force the image to stretch full width on any screen.

    Let me know if it works for you.

    -kevin

    Thread Starter migus

    (@migus)

    9 years, 6 months ago

    Hi Kevin!

    Sorry for late answer. It looks great now! The only thing is that there is a small margin on mobile screen. Maybe there is a code for that too?

    Thanks for your help!

    Ben Ritner – Kadence WP

    (@britner)

    9 years, 6 months ago

    Hey,

    @media (max-width: 768px){
.single-portfolio article .imghoverclass {
    margin:0 -20px;
}
}

    Add that to the end of your custom css and you should be set.

    Ben
    Kadence Themes

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Fullwidth feature image’ is closed to new replies.