Content container size on mobile

Hi,

I changed the default container size on desktop with the following code:

.page-id-xxx .container {
width: 750px !important;
}

Unfortunately, this messes up the size on mobile devices.

What code can I add to the CSS to make the container fit the screen of a mobile device?
NOTE: I would like this code only to apply to this single page (ie. page xxx).

This is code that I have tried, but it does not work:

@media screen (min-width : 900px) {
.page-id-601 .container {
width: 750px !important;
}
}

Thanks!!!

Dear Zach,

Could you please try the following CSS code?

@media only screen and (max-width: 991px){
  
  .page-id-601 .container {
    width: 100% !important;
  } 
  
}

Let me know how it goes.

Regards,
Kharis

That worked :slight_smile:

Thanks soooo much Kharis!
You are the real homie!

Dear Zach,

Thank you for updating me. I am glad to know that worked.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Khaaris