Hi,
How to change the size of graphics/boxes on mobile?
On mobile it shows each category one below the other, but this photo is very large which makes it look ugly.
This topic has 11 replies, 2 voices, and was last updated 1 months, 3 weeks ago ago by Peter
Hi,
How to change the size of graphics/boxes on mobile?
On mobile it shows each category one below the other, but this photo is very large which makes it look ugly.
Hi @Peter,
Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:
@media (max-width: 480px){
.et_custom_uniqid_68d52a6ab76b6 .wpb_column.vc_column_container.vc_col-sm-4 {
width: 31%;
float: left;
}
}
Kind regards,
The 8Theme Team
I added this code but nothing changed.
Please help.
Hi @Peter,
Could you please provide temporary wp-admin access? We need to check your settings.
To grant WP-Admin access, please proceed to create a new user account with an administrator role through your WordPress Dashboard. Once the account is established, you may securely transmit the username and password to us via the Private Content section designated for this purpose.
Thank you!
Hi,
I’d like it to not be too small, but readable and responsive on mobile devices.
It’s currently too large.
Unless you see another solution for this from the available modules?
Hi @Peter,
Here are 2 options for you:
1. Two columns on mobile:
@media (max-width: 480px){
.mb-row-3-columns .wpb_column.vc_column_container.vc_col-sm-4 {
width: 48%;
float: left;
}
}
2. Three columns on mobile:
@media (max-width: 480px){
.mb-row-3-columns .wpb_column.vc_column_container.vc_col-sm-4 {
width: 31%;
float: left;
}
}
Hope it helps!
I add this to “Global CSS” and nothing to change on mobile.
Why?
I’m checking this on Chrome on mobile. I’ve cleared the cache and cookies, and nothing changes.
@media (max-width: 480px){
.mb-row-3-columns .wpb_column.vc_column_container.vc_col-sm-4 {
width: 48%!important;
float: left!important;
}
}
Hi @Peter,
Here is the current view on our side: https://prnt.sc/lrMfzra240pR
Could you please check again?
Best regards,
8Theme Team
This partially solves the problem, but I have a “row” divided into three elements, and when I set the first option, i.e., division into two parts, it looks like:
2 elements, then 1 and empty space, then 2 and 1 again, and it looks ugly. And if I make it even smaller, it’s too small.
I thought I’d make a row just for mobile, but I can’t find the right CSS to set it up.
I made three rows of two elements.
Please help me arrange two elements next to each other in each row.
Hi @Peter,
Did you already sort it out?
It looks good on my end: https://prnt.sc/7hmiNaYpGmlu.
Best Regards,
8Theme’s Team
Thanks for the support! My topic “How to change the size of graphics/boxes on mobile?” has been successfully resolved.
The issue related to '‘How to change the size of graphics/boxes on mobile?’' has been successfully resolved, and the topic is now closed for further responses