Mobile site is showing up too wide sometimes

Hard to describe, so I added a screenshot.

How Do I get rid of the empty space on the right so that the mobile site only has the narrow space? This doesn’t show up in the Cornerstone editing view but only on an actual mobile device.

Hello Jere,

Thanks for writing in!

The screenshot you have shared is small resolution image and is very hard to decipher the issue. Can you please share a high resolution image?

I checked the website on my end and it seems to be working fine. Having said that I noticed you are using X Theme version 5.2.3 and Cornerstone 3.5.5. Please note that version of X Theme and Cornerstone that you have on the website are not compatible and may cause issues.

In that regards I suggest you to please update X Theme to latest version 6.5.5 to avoid any compatibility issues. You can take a look at following resources to update X Theme:

https://theme.co/changelog/

Thanks.

Let’s see if this works better. Didn’t realise I had only sent a thumbnail :slight_smile:

Hi Jere,

Please update X theme too. You are using latest version of Cornerstone but X theme is not updated. There’s incompatibility on theme and builder version. Please check again after the update.

Hope this helps.

I have updated X theme.

Currently on my phone it looks like this when opening

It is still possible to zoom out to get this

Also it is quite easy to scroll right.

I have yet to ask my friend to test on her phone, which the original screenshot is from.

Just realised something that might be causing this issue but I don’t know how to verify my suspicions:

On the front page kitaratunnitturku.com there is a table between the second and third orange buttons that is not mobile responsive. Can this be causing the theme to stay wide sitewide?

Here are mobile screenshots from the scroll view and zoomed out, respectively:

I am in any case in the process of replacing the table with a feature list with the same content.

Hi Jere,

I though it is the table too. But even after removing the table on the browser the issue still exist. Tried to check each element again and found the issue. The root cause is this custom CSS:


body {
    overflow: initial; 
}

Please remove that custom CSS. I am not sure why you added that. Maybe because of the table element? If yes, table by default is not responsive. No need to add that CSS. There are ways to make table responsive but since you will replave it with feature list element, that is even better than responsive table.

Thank you, that worked perfectly! I’m not sure why I had originally added tht CSS either…

You are most welcome. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.