Jump to content
Audun MB

Boxes left images cutoff looks bad

Recommended Posts

Andrew

The problem is due to the large header text causing the flexbox container to be wider than intended (when responsive)

My suggestion would be to add a media query to either tweak the layout or size of the text depending on your desired effect.

@media screen and (max-width: 760px) {
#page .boxes .pl-control-left .the-boxes-media {
  max-width: 50px;
}
}

Share this post


Link to post
Share on other sites
Audun MB

That didn't work and a short title doesnt change anything:

6234161285431296.png?k=eemjpiDpXyiPiupXX

The images is still cut off. 

Share this post


Link to post
Share on other sites
Audun MB
On 30.1.2017 at 6:09 PM, Andrew said:

The problem is due to the large header text causing the flexbox container to be wider than intended (when responsive)

My suggestion would be to add a media query to either tweak the layout or size of the text depending on your desired effect.

@media screen and (max-width: 760px) {
#page .boxes .pl-control-left .the-boxes-media {
  max-width: 50px;
}
}

Nah. That's not it. This works:

.boxes .pl-control-left .the-boxes-media {
    max-width: 400px;
}

.boxes .pl-image {
    background-size: contain;
    background-repeat: no-repeat;
}

Any chance of fixing that in the next version of Boxes? Add a "Full image" in addition the Standard/Default or Rounded options?

Max-width should probably be the same as the value set for image width, but as 400 is the max there, it works.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • yemoonyah
      By yemoonyah+
      Hi, even though I just got a SSL certificate, I can't get the green padlock to appear due to the following error:
      :A file with an insecure url of "http://yemoonyah.com/wp-content/plugins/pl-section-boxes/check.svg" was loaded via the javascript file: https://yemoonyah.com/wp-includes/js/jquery/jquery.js?ver=1.12.4 on line 3. The insecure URL may not be directly contained in the script file and may exist elsewhere."
      I figured if I delete and re-install the plugin it might fix the problem but will my boxes on the website still be there? Or do I have to redesign everything all over again if I delete the plugin and then re-install it?
    • JudithKlinger
      By JudithKlinger+
      The recent WP update seems to be quite cheeky...messing about with a number of things. 
       
      Having trouble with boxes displaying differently in different browsers.  1st screen shot is Chrom...looks ok. 
      2nd screenshot is Firefox...colors are different. Icons are different. Have weird 1000's next to the icons. Any idea what's going on? 
       
      Thanks!! 
      Judith
       
       


    • richardjacruz
      By richardjacruz+
      Someone reported this little bit of weirdness to me today. They were using Internet Exporer. I used an emulator, and I received the same result. Please see the attached.
      The website is richcruzchicago.com.
      Thanks,
      Rich

    • Susan
      By Susan+
      Everything was fine with my site.
      Suddenly, strange characters are appearing in Boxes. See image. Site page is here. I even tried to add a new Boxes section but the same thing keeps happening, so I deleted the new section.
      How can I resolve this?
      Your help is greatly appreciated.
      Thank you.
       
       

    • claudedagenais
      By claudedagenais+
      Hi,
      Could it be possible to add to the boxes an option so that if an Item has an optional link that we can also optionally make it open in a new windows.
      Thank you :-)
×