Jump to content


Photo
- - - - -

Problem with boxes on Firefox


Best Answer Rob , 17 January 2013 - 05:43 AM

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="http://jerrymagni.com/wp/wp-content/uploads/pelle2.jpg">
It worked absolutely perfect. Best of all, that's fully responsive.
 
 
 
Go to the full post


  • Please log in to reply
8 replies to this topic

#1 infojerrytattoocom

infojerrytattoocom

    Advanced Member

  • Members
  • 51 posts
  • Country: Country Flag

Posted 16 January 2013 - 04:10 AM

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:

 

Please Login or Register to see this Hidden Content

 

Thanks in advance



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 16 January 2013 - 04:38 AM

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?



#3 infojerrytattoocom

infojerrytattoocom

    Advanced Member

  • Members
  • 51 posts
  • Country: Country Flag

Posted 16 January 2013 - 11:16 PM

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)
}


#4 infojerrytattoocom

infojerrytattoocom

    Advanced Member

  • Members
  • 51 posts
  • Country: Country Flag

Posted 16 January 2013 - 11:32 PM

Hi James,

 

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



#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 17 January 2013 - 03:31 AM

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.



#6 infojerrytattoocom

infojerrytattoocom

    Advanced Member

  • Members
  • 51 posts
  • Country: Country Flag

Posted 17 January 2013 - 05:01 AM

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:

Please Login or Register to see this Hidden Content

without any overlapping even by resizing the window...

 

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



#7 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 17 January 2013 - 05:14 AM

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.



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 17 January 2013 - 05:43 AM   Best Answer

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:

Please Login or Register to see this Hidden Content

It worked absolutely perfect. Best of all, that's fully responsive.
 
 
 


#9 infojerrytattoocom

infojerrytattoocom

    Advanced Member

  • Members
  • 51 posts
  • Country: Country Flag

Posted 17 January 2013 - 12:40 PM

Thank you Rob,

 

that's perfect :)