Pages too large on mobile

Hi,
my site’s pages are too large on mobile version. This is the address:
https://www.mosaicopalermo.it
Can Anybody help me?

Hello @nexso,

It looks like you have added custom CSS code that causes horizontal scroll into style.css file. Please fix or remove that code in order to resolve this issue.

You will lose your custom CSS code after theme update if you add it to main stylesheet. You can add custom CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

I didn’t create child theme for time problems but I will do soon.
Meantime I copied all my custome css code.
If the problem is some custome css code conflicts, I will fix it.
Thanks for your reply.

The problem is widht and margin of .site-branding. I too play with them.
This night I will resolve. Thank you some much!!!

I resolved horizontal scroll fixed some css code but there is still red background in vertical orientation. My mobile is an One Plus 3 with 360 x 640 resolution.
Furthermore, in desktop version site-branding doesn’t follow site-logo.

Now, mobile version of my site works well but site-branding problem on desktop version persist.
Can Anybody help me?

Hello @nexso,

Can you please specify your current issue more precisely?

Kind Regards, Roman.

The link of site’s logo doesn’t work. If I click on it , i can’t go to homepage.

Hello @nexso,

It seems to be caused by this custom CSS code:

.site-logo {
    width: 500%;
    max-width: 500px;
    position: relative;
    top: 50%;
    margin-left: 250px;
}

Kind Regards, Roman.

I think the problem is the logo’s position on center because the issue persists also if you set max-width: 100px; and/or width: 100%;
I have solved moving site-branding that creates a link to homepage but this way creates issue with mobile navigation. Maybe this Theme is unable to work with a logo to center.

Hi,
with .main-navigation {width: 400px;display: block;position: absolute;right: 230px;} and
.site-logo { width: 500%; max-width: 500px; position: relative; top: 50%; margin-left: 250px; }
logo works well but in mobile, menu displays bad.

I solve the issue with

.main-navigation {
	display: block;
	float: left;
        right: -370px;
        width: 400px;
}

and

.main-navigation ul {	
        <del datetime="2017-02-07T20:23:46+00:00">right: -370px;</del>
}

Now logo’s site works and mobile version too but I have a little problem with responsive @1024. I need to become regular menu in toggle menu.

I mean erase right: x; from .main-navigation ul

Hi,

I am not sure what the problem is but just a parentheses, you should replace all your “px” units to “em” units, that will handle many problems in the future.

Here’s a unit converter:
http://pxtoem.com/

Fares

Hi everybody!
I solved my last issue fixing an error code. Thank you some much for your time!
Best regards!