Archived topic
Wrap for Featured Image
2 replies · Started by Jessica on July 17, 2016
Trying to remove the wrap for the featured image at the top of each page. It doesn't matter if I use the header add-on or just the featured image, it's wrapped to the max width based on the grid-container.
I have the function added to automatically insert the featured image at a specific size but there seems to be no way to change the wrap of the featured image so it is full width (beyond the width: 100px I set for the layout).
I want to be able to insert the featured image code below header/above page content & assign a class so I can style it's appearance, without losing the page's width of 1000px (essentially a container without a fixed wrap size). I am not seeing a .wrap class anywhere so I don't know how to override this.
UPDATE: I changed my 'layout' setting to separate containers & then added this to my stylesheet:
.separate-containers .page-header-image{
max-width: 1500px;
}Now, it's full width and responsive, but need to go one step further and crop it so it will adjust based on the smaller screens (mobile). Right now, I'm about 50% there but the mobile screens are showing a full width image that is super wide & short.
In order to change the image dimensions/ratio on mobile, you would have to load a second image specific for mobile which would be hidden by default on desktop and show on mobile.