Hi. I'm trying to polish the mobile and tablet version of my website, but unfortunately the padding that I used for main website don't look good in a mobile or tablet version. is there any video that helps? or tricks?
No, I don't mean revolution slider (its under construction still). I mean the entire page. In the attachment I send examples from how it looks on my phone. The text area is leaning too much to the right, pictures are underneath each other, although they should be under the text.
I see that you have added custom spacing (padding/margin) for elements thats the reason they are leaning on the right.
You can create elements of WPBakery Page Builder that will be valid only for Mobile or PC. To learn how to achieve that please see this video Responsive Control for Devices on the WPBakery Page Builder tutorials.
Another solution is to assign a class to the element and in responsive mode you can add media styles:
I don't think I understand the code. Lets say I added a class to one of my columns that has paddings and named it "video-creation". How the code should look then?
Your homepage contains already CSS code that is used as "custom css" you can see class assignments as ".vc_custom_{timestamp}" this is why they are applied. So I have created for you the CSS for homepage to eliminate these spacings:
Hi. I'm trying to polish the mobile and tablet version of my website, but unfortunately the padding that I used for main website don't look good in a mobile or tablet version. is there any video that helps? or tricks?
Dear Vibbio,
May you tell me how is your padding affected on your site, probably with screenshot so I can see where to focus.
I checked your site in tablet viewport and saw that slider text is more close to the browser edge:
(view large image)
If that is the problem, this should be configured on Revslider options page.
No, I don't mean revolution slider (its under construction still). I mean the entire page. In the attachment I send examples from how it looks on my phone. The text area is leaning too much to the right, pictures are underneath each other, although they should be under the text.
Hi Vibbio,
I see that you have added custom spacing (padding/margin) for elements thats the reason they are leaning on the right.
You can create elements of WPBakery Page Builder that will be valid only for Mobile or PC. To learn how to achieve that please see this video Responsive Control for Devices on the WPBakery Page Builder tutorials.
Another solution is to assign a class to the element and in responsive mode you can add media styles:
@media screen and (max-width: 768px) { .wpb_single_image .vc_custom_1540990323685 { padding-left: 0px !important; } }I don't think I understand the code. Lets say I added a class to one of my columns that has paddings and named it "video-creation". How the code should look then?
Hi Vibbio,
Your homepage contains already CSS code that is used as "custom css" you can see class assignments as ".vc_custom_{timestamp}" this is why they are applied. So I have created for you the CSS for homepage to eliminate these spacings:
Please add this Custom CSS:
@media screen and (max-width: 768px) {
header.site-header {
padding-left: 0 !important;
padding-right: 0 !important;
}
.vc_custom_1542360483612,
.vc_custom_1542360492388,
.vc_custom_1542364540698,
.vc_custom_1540987430610,
.vc_custom_1542016424546,
.vc_custom_1542274864589,
.vc_custom_1542274356752,
.vc_custom_1542274502399,
.vc_custom_1542274875833,
.vc_custom_1542364586602,
.vc_custom_1542364617101 {
padding-left: 15px !important;
margin-left: 0 !important;
}
}
To add custom CSS:
(view large image)
And copy/paste the above code to CSS editor:
(view large image)
and save changes.
yes, it worked for the main header! excellent. but I still have the same problem with padding in home page (and other pages) content.
Hi Vibbio,
I have checked your website on mobile viewport and it seems that the items are properly aligned:
https://d.pr/v/gkBD6W
Is there specifically anything that is not properly displaying, please let me know?!
Well, yes, because while I was waiting for your unswear for 2 days, I just figured out this problem myself :)
I'm sorry for the delay of your answer and I'm happy that you solved this
I wish you a great day!
Will mark this ticket as solved from here.