1. 

   wcamp
   

   offline

   Member

   Hi:

   I discovered two problems with the responsive styling on my directory's pages that use Layout Builder Magic (LBM 1.3.2). Can you suggest how to fix each?

   1. When viewing on a narrow smartphone, there is excessive left and right margins between the header and footer. Kindly tell me what I need to declare to change the left and right margins.

   2. For no apparent reason, the video image does not shrink to size. What do I need to add or change to the appropriate rule for that video?

   https://www.warrencampdesign.com/parables/parable.1a.seed-and-soil.html

   My style sheet is "p7lbm/exceptions.css."

   Thanks very much.

   Posted 4 months ago
2. 

   Gerry
   

   offline

   PVII Team

   1. The lbm columns re set to 30px left and right margins. You can reduce this for the phone by adding this style rule:

   @media only screen and (min-width: 0px) and (max-width: 700px) {
   .lbm-column {padding: 20px 6px}
   }

   This reduces the left and right padding to 6px for the phone, adjust the 6px to suit.

   2. The image for the video is not responsive. You have assigned the 'scalable-rounded' class to the <div> tag that contains the image, so the image is not affected. The 'scalable-rounded' class must always be assigned to the <img> tag in order for it to work.

   Posted 4 months ago
3. 

   wcamp
   

   offline

   Member

   Wow! I was relieved and delighted to receive and follow your two suggested fixes, Gerry.

   Both suggestions corrected the two problems.

   Many thanks, Gerry!

   Posted 4 months ago
4. 

   Gerry
   

   offline

   PVII Team

   You're welcome Warren, glad to hear it worked for you.

   Posted 4 months ago

RSS feed for this topic

Reply

You must log in to post.