-
-
Hi!
I’m having some issues with the way my website appears on mobile, the biggest issue being that the site seems too wide for the screen on mobile, or the elements are uncentered and align randomly left, right and centre despite telling them to align centre. It cuts off the edges when you view on mobile, especially post grid elements are problematic because there is text attached to the images and the words are cut off on the left side (you can’t even slide right to see the rest). It’s also very problematic in regards to the image sliders because they are uncentered and again text in the images is being cut off.
Image slider uncentered with edge cut off
Random alignment, dividers aligned left should be centred
Random alignment, elements aligning left should be centred
Another issue is that headlines that go over two or more lines don’t have the same line spacing as the desktop version and the lines overlap each other.
Headline overlapping, and text uncentered and cut off on the right
Favicon also isn’t showing up.
Website address: http://www.willowbranch.com.au
Thank you in advance for your help!
- This topic was modified 5 years, 7 months ago by willowbranch.
-
Hello,
Please try add this lines into Specular > Custom Css:
@media (max-width: 767px){ .boxed_layout { width:100% !important; margin-left:0px !important; } .container { margin:0 auto !important; } }
Please add those lines click save and let us know.
Regards!
-
Hi Ruco,
Thank you, that worked for the slider, but everything else is still uncentered.
-
Hello,
Inside the
@media (max-width: 767px){
rule, please add the following css too:h1 { line-height: 40px;} .textbar { margin-left: 2px !important;} .wpb_text_column { float: none !important;} .padding { padding-left: 0 !important; padding-right: 0 !important; }
Change the values to your wish.
Let us know.
Best regards!-
Hi Mihaila, thank you, but unfortunately that didn’t make any difference at all. Was this supposed to fix the overlapping headlines, or correct the centering?
-
-
Hello,
@media (max-width: 480px){ footer .inner .widget{ width: auto !important;} #copyright .desc{ margin-left:10px !important;} h2.vc_custom_heading{margin-left:10px !important;} .row-dynamic-el .media{margin-left:0px !important;} }
Please add this lines above and let us know.
Regards!
-
Hi Ruco,
That still didn’t make any difference.
-
-
Hello,
I have made some changes please check again. I have tested the site with iphone and other devices and seems ok.
Let us know.
Regards!
-
Hi Ruco,
I think it’s improves slightly, the post grid text is no longer cut off on the left, however, a lot of elements are still uncentered such as all the dividers, the post grids (it’s not cut off anymore but it’s still aligned left) and media grids, and the headlines are still overlapping.
-
Hello,
Can you please try clear cache and hard reload? I checked in mobile device and all seem good.
Let us know.
Best regards! -
Hi Mihaila,
I still can’t get it to work on my end. :( I’ve tried the normal Internet app and the Chrome app and it looks the same as before on both. I’ll try it on my husband’s phone and see if it looks different there.
-
Hello,
I have fixed the issue with the separator in responsive. Now everything looks ok.
Let me know.
Regards!
-
Hi Ruco, thank you, the separators work perfectly now! :) There are just a few more alignment issues, the post grids and media grids seem to be aligned left still, and the headlines are still overlapping.
-
Hello,
Please add this line into :
@media(max-width:480px;){ .vc_row .vc_row { margin-left:0px !important; } }
Click save and let us know.
Regards!
-
No difference, but the post grids are now cut off on the left again.
-
-
You must be logged in to reply to this topic.