Changing Article Margins On Mobile
YUMA SCOTT
Can someone help me with the coding needed to change the margins or whatever I need to make an article show up larger in mobile? All margins are too large and it makes the image and text too small to read on mobile.
Please see attached image for reference. https://prnt.sc/wVbA99XIx-dU
Paul Frankowski
Accepted AnswerHi Scott,
-
Thanks @Pavel, indeed it should help. Becuase by default there is 70px of padding, set by webmaster (?) of that site in Template Options > Custom CSS. It means that somebody forgot that that value is also used for Mobile view ;]
-
Think also about SEO & Accessibility - using only image in articles for example "Relaxing Your Wrist" is far too few, even Google suggests a minimum of 300 words. ! I mean, you need text under the image(s).
-
Improve also visibility and size of offcanvas toggler icon [=] by using
#offcanvas-toggler > i { color: #333;font-size: 26px; }
Mehtaz Afsana Borsha
Accepted AnswerHi
Thanks for contacting us and sorry for your issue. Could you please give me that specific page link?
-Regards.
YUMA SCOTT
Accepted Answersure, here ya go. it's with all articles on mobile though: https://midwestgca.com/index.php/gun-stuff/shooting-tips/315-jerking-the-trigger2
Pavel
Accepted AnswerHi.
Use media queries in your code.
For example
@media (max-width: 767.98px) {
.view-article article.item {
padding: 0 30px 30px 30px;
}
}YUMA SCOTT
Accepted AnswerThanks guys, appreciate your help!
By the way, my first name is Yuma :)
YUMA SCOTT
Accepted AnswerOK, so here's what I found, if I remove the 70px padding that was mentioned, and add the code that Pavel suggested, it looks good on mobile, but no longer looks good on desktop. See image here: https://prnt.sc/XbFg27RX-ibI
How can I make them look good on both? Is there a auto width or something?