Website width/centring issues on mobile

- 6 years, 10 months ago willowbranch
  Participant
  
  Expired
  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.
  
  Post grid element 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 6 years, 10 months ago by willowbranch.
- 6 years, 10 months ago Ruco
  Keymaster
  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!
- 6 years, 10 months ago willowbranch
  Participant
  
  Expired
  
  Hi Ruco,
  
  Thank you, that worked for the slider, but everything else is still uncentered.
- 6 years, 10 months ago Mirela
  Participant
  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!
  - 6 years, 10 months ago willowbranch
    Participant
    
    Expired
    
    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?
- 6 years, 10 months ago Ruco
  Keymaster
  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!
  - 6 years, 10 months ago willowbranch
    Participant
    
    Expired
    
    Hi Ruco,
    
    That still didn’t make any difference.
- 6 years, 10 months ago Ruco
  Keymaster
  
  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!
- 6 years, 10 months ago willowbranch
  Participant
  
  Expired
  
  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.
- 6 years, 10 months ago Mirela
  Participant
  
  Hello,
  
  Can you please try clear cache and hard reload? I checked in mobile device and all seem good.
  
  Let us know.
  Best regards!
- 6 years, 10 months ago willowbranch
  Participant
  
  Expired
  
  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.
- 6 years, 10 months ago Ruco
  Keymaster
  
  Hello,
  
  I have fixed the issue with the separator in responsive. Now everything looks ok.
  
  Let me know.
  
  Regards!
- 6 years, 10 months ago willowbranch
  Participant
  
  Expired
  
  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.
- 6 years, 10 months ago Ruco
  Keymaster
  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!
- 6 years, 10 months ago willowbranch
  Participant
  
  Expired
  
  No difference, but the post grids are now cut off on the left again.
- 6 years, 10 months ago Ruco
  Keymaster
  
  Hello,
  
  Please check it now.
  
  Let us know.
  
  Regards!