Archived

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

  • 0

Problem with boxes on Firefox

Question

Posted · Report post

Hello,

 

I have a problem with boxes on Firefox.

Basically it don't resizes the boxes.

 

I tested it on Safari, Chrome, on iPhone and iPad and it works without any problem.

How can i fix this?

 

the page where you can check the issue is:

 

http://jerrymagni.com/wp/portfolio

 

Thanks in advance

Share this post


Link to post
Share on other sites

8 answers to this question

Posted · Report post

Jerry,

 

I'm just an old testa dura, but using Firebug, I tested reducing the size by half and immediately the box resized correctly.

 

Here's the problem.  You have this code:

.pp4 {
    width: 23.5%;
}
.pp4, .pp5, .pp6 {
    margin-right: 2%;
}
 
The width is 23.5% of the available space which is a responsive way to size the boxes. However, inside the boxes, you have 200px width. Add to that 2% margin, as a result, what happens is that the image pushes the width of the box past the 23.5% causing the overlap. The solution is to make the image a percentage size.  When I modified that first image like this:
<img class="alignleft size-full wp-image-6784" width="100%" alt="pelle" src="
">
It worked absolutely perfect. Best of all, that's fully responsive.
 
 
 

Share this post


Link to post
Share on other sites

Posted · Report post

Buongiorno Jerry,

 

PostPins is set to fill a specific number of columns, so when it is seen in a mobile device, because it is not a responsive section, the pins overlap as they don't have sufficient width to stand singularly.

 

One way to resolve it might be to Disable Mobile View.

Share this post


Link to post
Share on other sites

Posted · Report post

Buongiorno Rob,

 

I tried to deactivate mobile view but nothing happen :(

 

 

It could be eventually just a matter of size? I'm using boxes also here: http://jerrymagni.com/wp/portfolio/pelle/seduta-x-seduta/

without any overlapping even by resizing the window...

 

later I'll try to resize again the images to see what happens ;)

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Jerry

 

It could be the boxes are to close together as the images are wider on the first box set that the second you've linked. Try widening the page canvas in the layout editor and see if that has any effect on the spacing of the boxes. Or try setting three boxes on a row to see if that resolves the spacing.

 

If neither of the above work could you post a screenshot of your box setup for us.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, I'm on firefox on a mac and the boxes are resizing fine on the link above. The images are set quite large though so as the screen resizes they are overlapping. Have you applied any custom css to the box images at all?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi James,

 

I applied some custom CSS but, as I'm not an expert, I don't know if any of the custom css could cause this problem in Firefox.

 

Please find here below all the custom CSS I added in custom code panel. Hope it helps.

 

 

 

 

// mobile feature
 
.mobile #feature_slider {
  display: none;
}
 
// immagini blog
 
.post-meta .c_img img {
    box-shadow: none;
}
 
.clip .post-meta .c_img {
    padding: 0px;
}
 
.post-meta .c_img {
    background: none;
    border: none;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.8);
}
 
.post-meta .c_img,
.hentry .c_img {
    border: none;
    display: block;
    line-height: 0px;
    max-width: 98%;
    padding: 0px;
}
.clip .post-meta .c_img {
    width: 68px;
}
 
// gravity form
 
label, input, button, select, textarea {
    line-height: 11px;
}
 
// base post
p:before {
    content: 0 ;
}
// fonts
h1, .fpost .entry-title {
    font-size: 26px;
}
h3 {
    font-size: 18px;
}
 
//widget title
.widget-title {
    font-size: 16px;
}
 
.commentlist li {
    background: none;
}
 
p {
  margin: 5px;
}
 
code {
    padding: 0;
}
h2 {
    font-size: 18px;
}
 
table.shop_table {
    border: #000000;
}
 
code, .prettyprint {
    background-color: transparent;
}
 
 
code, pre {
    border: none;
    font-family: metrophobic;
    font-size: 13px;
    padding: 0 0 0;
}
 
p.form-allowed-tags {
    display: none;
}
 
.content .content-pad {
    padding: 4px;
}
 
#feature_slider .fcontent {
    text-shadow: 2px 2px 2px #000000;
}
 
#feature_slider .fcontent .ftitle {
    font-size: 24px;
}
 
.pl_reader_container, .pl_nav {
    background: none;
}
 
#feature_slider .fcontent {
    min-width: 600px;
}
 
.clip_box {
    margin: 0;
}
 
.wp-comments {
    padding-top: 0;
}
 
.wp-comments .wp-comments-pad {
    padding: 0;
}
 
.post-nav, .current_posts_info {
    background-color: transparent;
}
 
 
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    font-size: 12px;
    height: 25px;
}
 
#respond #commentform textarea {
    height: 100px;
}
 
.wp-comments .wp-comments-pad > #respond input[type="text"], .wp-comments .wp-comments-pad > #respond textarea {
    background: none;
}
 
 
//gravity pulsante
 
input[type="submit"], .submit, input[type="button"], .button, input[type="reset"], .reset {
  padding: 4px 14px;
}
 
 
 
hr {
  margin: 2px 0;
}
 
//jigoshop paypal background
 
#payment {
  background-color: transparent;
}
 
 
// postpin
 
.postpin {
  background: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8)
}

Share this post


Link to post
Share on other sites

Posted · Report post

Hi James,

 

I tried to reduce the size of the images but the overlaying problem is still there :/

Share this post


Link to post
Share on other sites