Site looks horrible on mobile

[insightfultechnology]

our site works perfectly on desktop

but on mobile its all over the place

can you help?

Insightful Technology Home

[ruenel]

Hello Chris,

Thanks for writing in! The issue is because of your site settings. To get this resolved, please do the following:

1.) Please go to Pro > Theme Options > Layouts and Design.
2.) Set the “Max Site Width” to 1200 pixels only
3.) Edit your home page in Pro Editor.
4.) Get rid of the 100 pixel left and right padding of your section. It must be set to 0 only.
5.) Get rid of the left and right margins too. You will have to set it to auto.

If the above steps are not working for you, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[insightfultechnology]

if id o this it looks rubbish on desktop

i want full width on desktop and then it to render correctly on mobile

[nabeel]

Hey Chris,

If you set both Width and Max Width then you should have no issues on desktop, try setting the Width to 90% and Max Width to 1200px as suggested by Ruenel (see screenshot)

The problem you’re having in mobile devices is because of the padding, you need to get rid of padding to fix the issue.

Let us know how this goes!

[insightfultechnology]

as soon as i set width to 1200 the desktop site even with margins and padding et to 0 has 2 massive bars down either side

also how do i make header look good on mobile alll your suggestion is doing i sorting content?

[insightfultechnology]

can you look at site now ive changed all padding and it looks better. there are still some issues with header being cut off on mobile can you assist

[christian]

Hey Chris,

We’re sorry for the confusion here. You said in your first post that your site looks good on desktop already and we still suggested that you edit the Max Site Width which is practically only a setting for tablets to desktop. It restricts the site-wide container to the fixed px value so if you set 1200px, that means you’ll have lots of space on the sides if you’re viewing your site on a Full HD monitor.

Set your Max Site Width setting back the way they were but still lower the Section’s Side Paddings.

The only setting that squishes your content is the Section’s Padding. 100px is too much. Users usually use the padding option to have some space on the sides when viewed on a mobile screen so the usual setting is just 20px.

Moving on to the header, there are a couple of tweaks to make to fix the layout. Currently, I see:

1. There’s no space on the sides so your text sticks to the screen.

Solution: Increase the Outer Spacing in the Bar options.

2. Texts are cut-off.

Solution: Set the Bar’s height to auto first so that content in your bar won’t overflow vertically. Then, set the Container’s Width to 100%. That should make the text within the Container wrap.

Feel free to direct us to other styles you want to achieve for your header.

Hope that helps.

[insightfultechnology]

thanks for that its looks good, last bit is button in top right hand corner is squixhed and text is overlapped

[marc_a]

Hi Chris,

You can add padding to your button container so that it will not be squished in the mobile view. Then to fix your issue about the text is overlapped, you need to change the line-height of your button.

Hope that helps.

Thank you.

[insightfultechnology]

thanks this now all works on my iphone 12 standard size. srangley on the iphone 12 max its still not correct

[friech]

Hi Chris,

@insightfultechnology

srangley on the iphone 12 max its still not correct

Can you provide us a screenshot of that issue? so we know what element to look at.

In the meantime, please clear the browser cache of your iPhone 12. It could be just a cache that did not update and take the changes made.

Thanks,

[insightfultechnology]

thanks ill check cache i did the same settings for footer and it looks like this

if you go yo about us page on our site you will see as ive assigned footer there

the orgional footer is on all other pages

[prakash_s]

Hello Chris,

I checked the “About” page of your site on my phone it seems that the footer is working fine at my end. I would suggest you check it in the private mode of the browser.

Please have a look at the given screenshot below.

Thanks

[insightfultechnology]

thanks yes I’ve been using your advice and fixed it my self. couldnt have done it without your tips

thanks for all your help if you go to about us page on desktop only issue now is there is a scroll bar on page any ideas?

[prakash_s]

Hello Chris,

Are you talking about the multiple vertical scroll bar? In case if you are talking about that, it usually happens due to a broken HTML error. To check it we need to check your settings. I request you please share your login credentials in the secure note so that we can check your settings.

Thanks