Jump to content

Archived

This topic is now archived and is closed to further replies.

studioc5

Images are all touching in mobile view / multi columns loose padding

Recommended Posts

studioc5

I used columnizer and put 3 image widgets in the sidebar.  When the screen width is mobile size, everything is a single column.  All the images stack ontop of eachother with no padding. 

I see this class exist but I dont know why

.pl-section-pad .row:last-child > [class*="span"] {
    margin-bottom: 0;
}

 

Should this not be a mobile first class and only active for larger screens.  This class will be a problem for anything multi column in mobile view.

Share this post


Link to post
Share on other sites
James B

Hi there,

 

In the responsive mobile layout the elements will stack to best fit the screen size. This is why they're displaying one on top of the other.

 

You can either use Simon's fix to disable the mobile layout as seen in this post - http://forum.pagelines.com/topic/31053-dms-111-disable-mobile-view/

 

Or use css to apply a margin to the bottom of the images in the mobile layout to space them out more. If you enable the browser specific classes option inside the DMS Pro tools plugin options from the wp admin area, you'll be able to adjust the mobile version only using css. Screenshot - http://screencast.com/t/6ryNbPek8K

 

A guide to what the browser classes  are and how they can be used can be found here on the old framework docs (the classes are the same) - http://support.pagelines.me/docs/plugins/browser-specific-css/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

×