-
AuthorPosts
-
1 Jun 2018 at 18:45 #18579
Correcting margins (or padding?) on mobile view
ResolvedHey there! Have you noticed this support service is provided FREE of charge?
If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you ♥Hello,
I searched the support forum first FYI; didn’t see this topic,so:
Please see attachment – the mobile view of the front page widget area is pushed to the left — how can I correct this?
Thanks very much. Hoping to correct this in next few hours before sharing site with someone.
Sue
3 Jun 2018 at 11:42 #18586Hi Sue,
Please note that your image was not attached due to large image size. Try to convert the image to JPG so the image size (in KB) is smaller and it can be attached – it has to be less than 200 KB as stated in ticket/reply form information.
Do you experience the same issue on theme demo website? If not, please provide me with an access to your website so I can check the issue personally.
You might be interested…
Best regards,
Oliver Juhas
WebMan Design7 Jun 2018 at 20:56 #18616Okay, thank you. I have attached an image of the mobile view,, which shows how front-page widget content is jammed to the left.
I did not see the theme demo site where I can control mobile/tablet views, etc.
Thank you for your direction on this.
Sue
8 Jun 2018 at 12:44 #18622Hi Sue,
Thank you for spotting this issue. Indeed, there is a problem with theme styles when only 2 widgets are displayed in front page widget area. I will fix this issue in next theme update. Meanwhile you can use this custom CSS to fix it:
@media only screen and (max-width: 41.99em) { .front-page-widgets-container .widget { width: 96%; } }
You might be interested…
Best regards,
Oliver Juhas
WebMan Design8 Jun 2018 at 18:07 #18627Thanks – I applied that but it actually didn’t work (no changes appeared on mobile view).
Here’s a snapshot of my Additional CSS, in case you spot something that might be causing problems?
Thank you and I’ll stay tuned.
Sue
Attachments:
You must be logged in to view attached files.8 Jun 2018 at 18:19 #18629Hi Sue,
In that case just rise the specificity of the CSS selector, something like:
@media only screen and (max-width: 41.99em) { .site .widget-area.front-page-widgets-container .widget { width: 96%; } }
Tip: If you want to validate your custom CSS code, you can do so at https://jigsaw.w3.org/css-validator/#validate_by_input
You might be interested…
Best regards,
Oliver Juhas
WebMan Design8 Jun 2018 at 19:27 #18631Thanks – Strangely enough, it still looks the same, no change.
Another change that is not “taking” is changes I made to the header navigation colors – background and text. I’m lost as to why this isn’t showing on my phone (and yes I keep refreshing …).
Thanks again and I hope we can figure out what’s going on.
:) Sue
8 Jun 2018 at 19:36 #18632Hi Sue,
The new code works perfectly fine for me. I can see it works fine on your website too. Maybe you just need to flush your browser cache?
You might be interested…
Best regards,
Oliver Juhas
WebMan Design8 Jun 2018 at 20:59 #18642Ok, great. I cleared my browswer cache and still no luck; I then “purged all” under caching in the site itself, and that seemed to do the trick.
Your “You Might Be Interested” tips are super useful.
Thanks again!
Sue
8 Jun 2018 at 21:06 #18643Hi Sue,
I haven’t noticed you are using a server cache. Indeed, if you are using such caching, you need to first flush that one.
If I may advice you, during the website development/building process it is recommended not to use any server caching solution (I don’t know if you have enabled the caching in your hosting account or via a plugin in WordPress). I suggest to enable server caching only after you are happy with the website and it can “go live”.
Best regards,
Oliver Juhas
WebMan Design -
AuthorPosts
You must be logged in to reply to this topic.