Page Format Standard: Image to match frame on mobile?

Image Frame

Page: Format is Standard Template

Can’t find the right CSS code to line up that picture to the frame to match the Headline.
See the red marked lines. Problem appears on the mobile and tablet version!

URL to see the website live:

I tried to use the page full-width before, but unfortunately it stretches the featured image (1920x1080) in a weired way so I am always getting a distortion on the desktop version, as well as on the mobile version.

you can see the problem on a test page here: PAGE FORMAT FEATURED HEADER IMAGE

[Page Format Featured Header Image]

Please advise how to either change the CSS Code to fit the Image into the Frame, like marked in red.
Or let me know how else you could use a different PAGE FORMAT to fix that problem.

Thank you

Hello,

You can try to use the following CSS code.

You can add CSS code in Dashboard → Appearance → Customize → Additional CSS.

@media (max-width: 780px) {	
    #pgc-9210-0-0.panel-grid-cell {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman!

Sorry… I tried the code you gave me.
Just doesn’t work.

The padding or margin on the images are still the same.
It’s the mobile version that just doesn’t look right.

Any other code that could fix that?

Hello,

I have just tried to apply that code on this page once again using browser tools and it worked.

How exactly you added the code? Did you try to clear browser cache after applying the code?

Kind Regards, Roman.

Roman,

how could you apply the code to one of those pages?
The page still has the same issue… or did you just try it with the Inspector?

I guess I see what you mean.
Indeed, that ONE PAGE has now the image as it should be.

However… I need a GENERAL CSS CODE that all other pages will be effected the same way.
I can’t write for each page an additional CSS code. does this make sense?

There is no browser cache issue on my end. Checked it on multiple browsers, plus incognito mode, etc.

I just applied the code at the end of my css file to ensure it will overwrite any existing code.
Like I do with any other code. I am using the simple Custom CSS plugin.

However… I also added the code to the CUSTOMIZE->Additional CSS
But it’s the same. The Code doesn’t effect the image.

I tried to use the inspector, to find that specific element.
But no luck. No clue what code it is to change that thing.

For some reason, that code doesn’t do anything with it.
It would be really cool to use just a CSS code to fix that issue.

It’s just strange, that Sydney Pro doesn’t support featured images on Pages with Default / Standard Format.
That feature should be enabled within the function.php and page.php file - in my opinion.

However… I don’t want to mess around with all the .php code.
If we could fix it with CSS - that would be cool!

So what you think… what’s not working?
How can we possible fix that padding or margin issue?

Hello,

I thought that you want to affect that particular image. I used Inspector and Style Editor to test the code.

Please try to remove that CSS code, edit row (not widget) that contains image that you want to affect, expand Layout section, select Full Width Stretched for Row Layout, and save your changes.

Kind Regards, Roman.

Hello Roman!

Yes, I want to affect ALL IMAGES on the Standard Page Format.

Sorry, I can’t follow you! What do you want me to do?
Edit row? Where? What?

I am lost!

Hello,

Please check Editing a Row section here:
https://siteorigin.com/page-builder/documentation/building-a-page/

There you should be able to find what I mentioned above.

Also you can watch this video:

Kind Regards, Roman.

Hi Roman!

Thank you. Of course I tried all those options and features before. Unfortunately, it didn’t work.
I created for you a comprehensive video, that shows step by step all my trials.

https://www.youtube.com/watch?v=iz2zgCSsLFE

Link to the test page in the video:

Hello, thank you very much for the video explanation. You can try to use this CSS code instead of previous:

@media (max-width: 780px) {	
    .panel-grid .panel-grid-cell {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

But please note that you might have to adjust mobile padding for other widgets that contain text.

Kind Regards, Roman.

Unfortunately, it’s not gonna fly.

Watch this:

Hello, try to use this CSS to target each image:

@media (max-width: 780px) {
    #pgc-10895-0-0.panel-grid-cell,
    #pgc-9210-0-0.panel-grid-cell,
    #pgc-6529-0-0.panel-grid-cell,
    #pgc-2326-0-0.panel-grid-cell,
    #pgc-9210-0-0.panel-grid-cell,
    #pgc-8979-0-0.panel-grid-cell,
    #pgc-8979-0-0.panel-grid-cell,
    #pgc-6193-0-0.panel-grid-cell,
    #pgc-10386-0-0.panel-grid-cell,
    #pgc-6353-0-0.panel-grid-cell,
    #pgc-13755-0-0.panel-grid-cell,
    #pgc-2223-0-0.panel-grid-cell,
    #pgc-10893-0-0.panel-grid-cell {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

But you’ll have to add IDs when you add pages.

Kind Regards, Roman.

Hi Roman!

What do you mean with the IDs?
Can you please explain step by step?

Thanks

Hello,

You should inspect newly added widget, find the <div> element with .panel-grid-cell class, copy its ID and add it to the CSS snippet that I mentioned above in the same way.

Kind Regards, Roman.