Featured image width

jgtravelgroup · Member · Jul 11, 2017 at 3:24 pm
Copy link

Add topic to favorites
Hi,

I’m trying to make the featured image on a page 100% width across browser but can’t see to make this happen. Does anyone have any ideas or another solution?

Thanks,

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 12, 2017 at 12:55 am
Copy link
Hi, right now your site is coming up for me as in Maintenance Mode, so I can’t currently look. Let me know when that is done, and also if you can give me the URL or title of the page that has the featured image on it you want wider, I’ll take a look and see what I can do.
jgtravelgroup · Member · Jul 12, 2017 at 9:32 am
Copy link
Hi,

I have turned that mode off now so it should be live. the page in question for the image is the “leadership” page.

if you need anything else let me know,

Thanks for taking a look
thesacredpath · Member · Jul 12, 2017 at 6:22 pm
Copy link
Are you by chance talking about your Leadership page? If so, we can make it full width on screens/windows 1380px wide and narrower with the following custom CSS Media Query.
```
@media screen and (max-width: 1380px) {
   .inner-wrap {
      width: 100%;
   }
}
```
At screen widths over 1380px, due to the way the html and CSS are done, we would have to make everything 100% width in order to make the featured image full width as the featured image and the rest of the page content are within the same inner-wrap div.
jgtravelgroup · Member · Jul 13, 2017 at 7:35 am
Copy link
Hi,

i am indeed talking about the leadership page yes. i had presumed that would be the case, i was hoping i wouldn’t have to do it that way. but makes sense that’s the only option in this case.

however i put that css in and the image at the top of that page didn’t span full width?

Thanks,
thesacredpath · Member · Jul 13, 2017 at 7:09 pm
Copy link
Hi, the image will only be full width if the browser window is less than 1380px in width. If your browser window is over 1380px wide, then the image is not full width. I just tried the above again, and it did work for me.

Can you add the code again and then leave it in so that I can take a look if it doesn’t work?
jgtravelgroup · Member · Jul 14, 2017 at 7:51 am
Copy link
Hi

right ok, makes sense, if i want to increase the image width to span full width on bigger screens and increase the @media the image doesn’t seem to span further, the image itself should be 2000px in width so should be fine to look as per the homepage image (at larger screen sizes) or is there something i’m missing?

I’ve put that code in and left it there.

Thanks again for looking.
thesacredpath · Member · Jul 14, 2017 at 9:11 pm
Copy link
The image, no matter how wide you make it is constrained on screens 1380px and wider by the parent div, which has a maximum width of 1380px. If you want the image full width, we have to make everything full width.

Remove this.
```
@media screen and (max-width: 1380px) {
   .inner-wrap {
      width: 100%;
   }
}
```
Then add this. I’ve limited this change to the Leadership page only.
```
.page-id-123 .inner-wrap {
    max-width: 100%;
}
.page-id-123 #content img {
    width: 100%
}
```

No items found.