[Resolved] Featured image wont go full width

[chris]

Hi I have a featured image on some pages, I have added some CSS to remove the top margin which works fine, however I cant get it to display full width what ever I do, I tried creating an element header with <–featured image–> but didn’t work, clearly doing something really wrong. The CSS will make the image smaller but no matter how high the px I put it stays within the “container” so to speak, is there a CSS method I can use to make any page with featured image be full width? I still want to use sidebars you see?

Tia

[David]

Hi there,

in your CSS add the max-width: 100%; property eg.

.page-header-image {
    max-height: 460px;
    width: 100% !important;
    margin-top: 0px !important;
    border-bottom: 4px solid #5db35d;
    max-width: 100%;
}

[chris]

Hi thanks for that, now the image is too high? Is there a way to have the middle of the image appear but shorter, i tried moving margin top up which worked but not what i want to do.

[David]

Remove your current CSS and try this:

/* make page header container full width and remove separating space */
.separate-containers .page-header-image.grid-container  {
    max-width: 100%;
    margin-top: 0;
}
/* force img to fill page header container width with fixed height */
.separate-containers .page-header-image img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    object-position: center center;
}

Adjust the height: 360px; to suit.

[chris]

Thanks perfect, However on mobile view on “about page” the pictures are displaying huge for no reason, and there is a margin to the right of the screen that only appears on the mobile view. I believe it’s the img+text widget within the container but i have checked the padding & margins for errors which may cause but cant find anything.

I tried making the outside margin 20px all round just on mobile to stop this but didn’t effect anything atall

Any help for this one? scratching my head

[David]

the issue there looks to be related to a combination of things.
The first and main thing being is that the Container Block and the Media & Text Block it contains both are set to Wide Width ( given the alignwide CSS class ),

So is the Wide Width design intentional ? If it is then its gonna take some CSS to try and get round that. Let me know

[chris]

It is for desktop as it looks nice to have the picture and info overflow the text underneath, is it possible to keep the design but change how big the image is on mobile by any chance?

Changing the containers to normal worked to fix the gap at the side thanks a bunch!

Still wonder if possible to target the therapists pictures via css to apply one rule to them all?

[chris]

I have a css class assigned to them

.rounded-corners img {
border-radius: 10px;
}

Is there a way to target this css to mobile ONLY? this way i might be able to rezise and centre them?

[chris]

Figured it out with

@media(max-width: 768px) {
.rounded-corners img {
height: 160px;
width: 160px;
}
}

How do i centre this? that my only issue now thanks

[chris]

Issue with tablet mode, everything is shifted to the left off screen? sorry to be a pain in your…

[chris]

Idea: how do i centre the container containing evything? is that possible with sidebars its low enough it wont overlap?

[Ying]

Hi chris,

Which image are we talking about here?

I’m not seeing an image with rounded-corners class on the link you attached.

Can you explain a bit more?

[chris]

on this page https://medicine-garden.com/about/ the pictures of the ladies faces have the class attatched and have managed to reize them just for mobile view but i want to centre it if possible, also the container that all the pictures text ect are in on tablet are been displayed to the left out of view for some reason

[Ying]

You are using WP’s media and text block which GP has no control over it.

As you are already using the GenerateBlocks plugin, why not use the Grid block to build the same layout? So you will have much better control in terms of responsiveness.

[chris]

Hi i made “Sara” image and info now with the grid in a continer and it works fine, however still have the issue on tablet view of the text and image been off screen for some reason?

[Author]

Posts