Mobile Page Width

Mobile Page Width

- 9 years, 6 months ago RalphB
  Participant
  
  Expired
  
  Hello,
  
  On mobile, I’d like to increase the width that text takes up site-wide.
  
  Also, I’m having problems with some headings being cut off on mobile (ex:https://i.imgur.com/P9xUC0p.png)
  
  Thank you :)
- 9 years, 6 months ago Ruco
  Keymaster
  Hello,
  
  You must edit the file ‘specular/css/bootstrap-responsive.css’
  
  Find the lines:
  @media (max-width: 979px)
  
  @media (max-width: 979px) and (min-width: 768px)
  
  and change the width: ‘979’ to the one you want the layout to change for responsive.
  
  Add this css at custom css box:
  
  @media (max-width: 484px) { h1 { font-size: 29px;} }
  
  Best regards!
- 9 years, 6 months ago RalphB
  Participant
  
  Expired
  
  Thank you! :)
- 9 years, 6 months ago RalphB
  Participant
  
  Expired
  
  Wait, I’m not trying to switch the cutoff point where things switch to mobile, but I’d like for the margins on mobile to be wider.
- 9 years, 6 months ago Mirela
  Participant
  
  Hello,
  
  Can you please send us the link where you have this element? I opened most of your site’s pages in mobile but the content is perfectly aligned in the middle. i don’t see a situation like the screenshot you send.
  Let us know.
  
  Best regards!
- 9 years, 6 months ago RalphB
  Participant
  
  Expired
  
  I fixed the image being cut off by having the text become smaller on mobile only for the headings.
  
  The problem I’m having now is that when you view the site on mobile, I’d like for the content to take up more of the page (Example – the yellow lines are where I’d like for the margins to be, so the text should go that far (make believe the yellow lines are straight haha): https://i.imgur.com/nCFdgxq.png)
  
  Thank you so much! :)
- 9 years, 6 months ago Mirela
  Participant
  Hello,
  
  For this you can by increasing the container width. Add this code into your custom css box:
  
  @media (max-width: 767px){ .container { max-width: 420px !important;} }
  
  Edit the value to your wish, but it should not exceed 420px. Or the elements will go out of line.
  Let us know.
  
  Best regards!
- 9 years, 6 months ago RalphB
  Participant
  
  Expired
  
  Thank you!
  
  That messes with other theme elements, so if anyone else wants to do this I added a class name to the row/blocks I wanted this applied to like this:
  
  @media (max-width: 767px) {
  
  .rowclassname .container {
  
  max-width: 420px !important;
  
  }
  
  }
  
  Thanks again for the help!

Viewing 7 reply threads

You must be logged in to reply to this topic.

Community Forums

Site Links

Useful Articles

Login