Archived topic
Size of widget on mobile
5 replies · Started by William on July 19, 2017
Hi Tom!
When viewing on mobil the widgets appear to big. Is there any way to down size them only on mobil?
Hi William,
Can you link me to the page?
I should be able to help with some CSS.
Thanks!
http://www.tronderskkompetanse.no/
So I want the sidebars widgets to scale down when watched on a mobile :)
Hmm not really a good way to scaled it down but maybe you can increase the padding on mobile?
@media (max-width: 768px) {
.widget-area .widget {
padding: 40px 40px 40px 40px;
}
}
Adding CSS: https://docs.generatepress.com/article/adding-css/
The current padding is 27px 39px 24px 37px. The notation is top, right, bottom, left.
Thanks :)!
I am also trying to have one image show on mobile while on pc screen it does not show, but another will!
can you help me?
HTML
<div class="row">
<img src="http://www.tronderskkompetanse.no/wp-content/uploads/2015/02/19398755_1218590634952938_1355660979_n-e1498667256658.jpg" class="img-responsive careerpage">
<img src="http://www.tronderskkompetanse.no/wp-content/uploads/2015/02/banner.jpg" class="img-responsive careerpage mobile">
...
</div>
@media only screen and (max-device-width: 480px) {
.img-responsive {
display: none;
}
.img-responsive.mobile {
display: block;
}
}
Trying using GP's built in classes: hide-on-mobile hide-on-tablet hide-on-desktop