Jump to content

Archived

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

sfmstudios

Boxes not formatting correctly in Safari

Recommended Posts

sfmstudios

Have a simple splash site at www.bpetricone.com and am finding the Boxes section doesn't seem to wrap well on Safari on any device (see attached...Mac, iOS).  

 

Attempted using a couple different @media CSS options to zero success...what am I missing?

/* Boxes Small Screen */
@media screen and (max-width: 767px){
  .boxes .pl-control-left .the-boxes-media {
    max-width: 45px;
  }
}

/* Boxes Small Screen */
@media screen and (max-width: 767px){
  span.the-boxes-media.pl-animation.pl-appear.media-image.animation-loaded {
   width: 45px;
  }
}

 

iOS-iPad_02.png

iOS-iPhone_01.png

Share this post


Link to post
Share on other sites
Simon

try something like...

@media screen and (max-width: 767px){
    .the-boxes-media{
        margin-right: 35px !important;
    }
}

 

Share this post


Link to post
Share on other sites
sfmstudios

Thanks, Simon...that seemed to do the trick.  Wondering if this is something that needs tweaking as a PL update?  Or is it because I increased the size of the box images?

Share this post


Link to post
Share on other sites
sfmstudios

After more testing, the problem seems to stem from the description in the first box not wrapping nicely - struggling to find a CSS trick to make it play nice.

Any thoughts?

Share this post


Link to post
Share on other sites
sfmstudios

Thanks, Chris - didn't realize the Heroes stacked like that in PL5...options are great! :-)

Share this post


Link to post
Share on other sites
Audun MB

Is this a general issue for Boxes with Media at left? I have the same thing in Chrome.

Share this post


Link to post
Share on other sites

×