Text and image full width on mobile

[MattMcDermit]

Hello, I am trying to make the image and text be full width on mobile for Integrity Posts.

Example: https://www.gothamcanoe.com/an-english-elm-in-brooklyn/

On browser, I do not want it to be full width so I have this code:

.single-post .x-main {
width: 75%!important;
margin: 1% auto;
float: none;
}

Is there a way to make it not full width on browser and full width on mobile?

Thanks,
Matt

[tristup]

Hi MattMcDermit,

Thanks for reaching out.

To get the full width image and text you need to overwrite your code in mobile screen size using media query.
In following code breakpoint set to 600px, you can adjust it as per your requirements.
To know more on the breakpoints please visit here

@media (max-width: 600px) {
.single-post .x-main {
width: 100% !important;
margin: 1% auto;
float: none;
}
.single-post .entry-featured {
width: 100%;
}
}

The code I provided only serve as a guide. If you encounter an issue with the custom code or wish to improve it, you need to check this resource .

Hope it helps.

[MattMcDermit]

Thank you for your help. This provides a great starting point. Much appreciated.

[friech]

You’re more than welcome, glad we could help.

Cheers!