-
-
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 :)
-
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!
-
-
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.
-
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!
-
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! :)
-
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!
-
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!
-
You must be logged in to reply to this topic.