Having different width in mobile

Hi there,

I formatted my theme Sydney with Elementor, except for the blog and single post pages.
Because of it, I had to use these CSS codes on the blog and single post pages, to have the margin I wanted:

.blog .content-wrapper {
    width: 70%;
}

.single-post .content-wrapper {
    width: 70%;
}

It worked very well on desktop but not on mobile.

This is how a page formatted with Elementor looks like on mobile, and the example of how I want my blog and single post look like too: https://www.dropbox.com/s/ytij5eaajypp215/IMG_0663.jpg?dl=0

This is how the blog page looks like: https://www.dropbox.com/s/cviu3519ykf7eoo/IMG_0664.jpg?dl=0

This is like the single post looks like: https://www.dropbox.com/s/i84z264iun17d0e/IMG_0665.jpg?dl=0

So, can I have a CSS code to make the width of these two pages different in mobile?

Thanks in advance!

Hello @danitabalipa,

You can try to wrap that code in media query in order to enable it only on desktop resolutions:

@media (min-width: 1025px) {
    .blog .content-wrapper {
        width: 70%;
    }

    .single-post .content-wrapper {
        width: 70%;
    }
}

Kind Regards, Roman.

It worked!!!

Thank you again, Roman. You are my angel!

Wow Dani, you make me shy :slight_smile: You are welcome!

Kind Regards, Roman.