Website doesn't fit on the mobile screen

Site URL: https://www.trickortreatyourcellf.com

Hello everyone,

I use a Bedford template and on my computer and Ipad the website fits the screen exactly the way I want it to be. But for some reason it doesn't fit the mobile screen.

Maybe it's important to mention that I used these CSS codes to customize the screen:

#page, #content {max-width: 90% !important;}

@media screen and (max-width: 640px) {
}

The first CSS code to adjust the dekstop screen worked. But the second one didn't work for the mobile screen.
Is there another CSS code I can use to make it fit?

Thank you in advance,

Cynthia

Maybe this will help you:

@derricksrandomviews
Thank you for your answer, I've done some research before I asked this question on this forum. I also saw that video. The reason why that video didn't help me is because there is no "mobile" option available/visible when I look at "Design".  That is something that differs per template I guess.

So what you need is a tweak or code to make the site wider in mobile view, there is a vertical space down the right side. That is what I saw in mobile view on my desktop. 

I found this code that addresss this problem with another 7.0 template. Curious the code you said that didn't work is the same as this but with a smaller px count. The first code you posted does  work. Did the first code snippet cause a problem? 

@media screen and (max-width: 767px) {
  .gallery-fullscreen-slideshow[data-height="L"] {
    height: auto !important;
  }
  .gallery-fullscreen-slideshow-item img {
    object-fit: contain !important;
  }
}

Thank you for your reply! Yes, that's exactly what I need. That code also doesn't work. I think the first code I posted indeed caused a problem. The reason I used that one is to tweak the dekstop screen. 

This is strange, I noticed that the last sentence in my footer wasn't centered. The one that says: "Trickortreatyourcellf 2021 ©". So I centered it and when I looked at my mobile screen, the vertical space down the right side was gone. Problem solved 🙂

Sometimes it is the simplest thing. Mobile view was lining up with that text marker. I had the opposite problem with my site's mobile view of my home page. When I got rid of the empty space next to the image at the top of the page, my  action buttons shifted to the left. I fixed that, wish I could remember what I did though. 

my random views

You're right, sometimes it can be that simple! Very interesting how websites work. 😅