[Resolved] Bug at 1024 pixel

[Garth Dryland]

Tom

I neglected to check this footer issue with the correct zoom on the post above.

I later discovered that using the same @media breakpoint numbers respectively works better than having the 1px difference between breakpoints when using 125% zoom though at 100% they do both appear to behave identically.

However its still an issue at 768px 769px wide when using 125% zoom. Despite my other breakpoints working best when min and max use the same number respectively however when it come to the themed mobile breakpoint I have to use the 1px difference method at 125% or widget content is thrown out both horizontally and vertically.

I assume this must be a grid type issue. I will create a few screen shots or maybe screencasts on this shortly.

Thought I would post this so you know in the mean time.

[Garth Dryland]

Tom

I have uploaded some more screencasts.

It appears that in the community version 1.3.34 the majority of the issue is with the mobile view breakpoint at 110 and 125% (maybe other % zoom). For some reason I have to have 1px between min and max here also whereas all others work best sharing the same numeric breakpoint for both min and max setting respectively. All appear to work on 100% -125% zoom except for at 768 769px At this point only 100% zoom works as shown in one of the screencasts.

I also believe the changes made to fix 1025px issue (other version) changed how the footer works because I was getting both columns touching side by side at one point whereas the community version doesn’t appear to do that at all, so it appears something else must have moved in the grid when you made that change for that to happen.

Hope this helps clarify a bit more.

[Tom]

Why are you adding -50px padding?

If you’d like to try the latest version with the footer fix just shoot me an email and I’ll send it over.

[Garth Dryland]

After trying numerous spacing options to get the layout to look consistent throughout varying widths I found this worked though I know its not ideal because if I drop down the widget padding in customise a -50px setting will make the padding drop below the black footer creating white space.

It was the only way I could get it to do what I wanted for some reason. Not sure why the mobile footer margin padding differs so much from the standard desktop view padding but I know its not my css doing it. If I take it all out it just acts this way by default.

It would be great if this could be tweaked also so they have consistent spacing.

What can I expect to see different about this new version. What did you tweak with respect to the footer ?

Sending email now.

[Tom]

I don’t even think negative padding is valid CSS/does anything. Take a look: http://stackoverflow.com/questions/4973988/why-does-css-not-support-negative-padding

Will send the latest now – it fixes the column issue in the footer.

[Garth Dryland]

Hey Tom

Using a negative value definitely does appear to work or I wouldn’t see it move the widgets downward however I do believe it may only work because I have used a positive value elsewhere. As I said previously I have a positive number in the customiser. I believe I may effectively be cancelling out this positive value with the negative value in the media queries. Either that or margin-bottom doesn’t act the same as padding does in the footer. I had to use margin-bottom to make this negative value work. Using padding in this fashion did nothing or next to nothing.

It was the only way I could get the widgets to sit in a consistent position at varying page widths.

Do you get what I mean?

Do you also see what I mean by the space below the widgets differing between the desktop and mobile view or more precisely with a viewport of 1024 pixels or less ?

In a desktop view there’s like 40-50px below the widgets whereas below 1024px its more like 90-100px yet this happens without including any CSS, so the difference in position must be triggered by the theme somehow.

It would be nice if these acted the same so the content remained in an identical position regardless of view type. The top appears to and so do the sides but for some reason the bottom acts differently increasing the white space below the widgets when the viewport is below 1024px. You can check what I mean using accountwise.co.nz which has no such media queries controlling widget padding etc. You can also see the same thing happen on generatepress.com

Cheers

[Tom]

You can use negative values with margin, but not with padding. However, negative margins should be avoided unless absolutely necessary.

Do you also see what I mean by the space below the widgets differing between the desktop and mobile view or more precisely with a viewport of 1024 pixels or less ?

I don’t see what you mean. The spacing doesn’t change depending on media queries currently. You can check the padding and margin using inspect element on desktop vs mobile if you’re interested – there’s no differences.

Of course, as you resize, the footer will move up and down depending on the length of the content above it as it adjusts to the width of the browser. This is 100% intended and the natural flow of resizing your browser. As the browser reduces in width, the content becomes longer as the space for it reduces, and the footer is moved down naturally.

Things will adjust as you resize your browser, they won’t stay constant unless you completely disable the responsive aspect of the design. This is the intention of responsive web design, which is where the name responsive comes from.

There has been a couple bugs – the grid disappearing at 1025px while zoomed in being one of them (now fixed).

The footer widgets not taking up 100% of the grid at 769px (I think) while zoomed (now fixed as well).

generatepress.com isn’t running the latest version, so it’s not the best site to test out these issues on.

I’m not sure I’m seeing any other bugs – even in the videos you’ve created.

[Garth Dryland]

Hi Tom

You appear to be missing my point so I’ll show you using a screencast

You should see the white space below the lowest widget(s) change in distance from the footer element where the copyrights located. It happens at 1024 pixels wide and smaller.

There is a one pixel zone IE 1025px using 110 and 125% zoom where the format appears correct at the bottom though not between the widgets however from that point on (1024 and less) the distance between footer and footer widgets increases by about 40-50px and between is the widgets is back to being where it normally is. It not due to anything I’ve done. This site uses the latest community version and has next to no CSS other than to control back to top button position and sticky post color and the like.

Do you see what I mean now ?

PS the horizontal scroll bar appearing is now fixed and unrelated.

[Tom]

Oh, well that’s not really a bug as much as a CSS tweak. That’s just the margin bottom of the widgets combining with the bottom padding of the content container.

Maybe something like this should be added to the core theme?:

@media (max-width: 1024px) {
    .active-footer-widgets-1 .footer-widget-1, 
    .active-footer-widgets-3 .footer-widget-3, 
    .active-footer-widgets-5 .footer-widget-5 {
        margin-bottom: 0;
    }
}
@media (max-width: 768px) {
    .inside-footer-widgets > div:last-child {
        margin-bottom: 0;
    }
}

[Garth Dryland]

I’ll try that CSS and see what happens.

What about where the format changes at 1025px using 110 and 125% zoom ? The CSS provided wont stop that occurring which is more so what I see as a bug.

The issue below the footer I assumed would be associated to a combination of padding areas and the like given the CSS I used to manipulate it.

The extra area below widgets however occurs from 1024px not 768. I will play around with the CSS above changing values and see what happens.

I will also try the updated theme you emailed earlier following that.

Cheers

[Tom]

Let’s work on one issue at a time so don’t add to any confusion.

I adjust the code above.

Let me know how it works out.

[Garth Dryland]

Tom

This appears to sort the problem re space below the widgets and I reckon probably should be included in the theme.

@media (max-width: 1024px) {
    .inside-footer-widgets > div:last-child {
        margin-bottom: 0;
    }
}

You can see what happens now here on my temp default test site. This just has simple css and generatepress community version 1.3.34 installed.

It also seems to work okay at 100 110 and 125% zoom using chrome with respect to this issue.

[Tom]

Awesome, good news – added to the theme.

Onto the next issue 🙂

[Garth Dryland]

Okay I tried the test theme and it seems good vertically so far re right side footer widgets touching left widgets, That issue does not appear to be happening now.

I’m still getting a large white space under the widgets on 125% zoom and 769px and 110% and 768px controlled with the margin-bottom: -50px; in this example. 100% seems fine.

The CSS in your/my post above doesn’t appear to correct this issue either so I guess that means the grid moved horizontally at those to points.

Cheers

[Garth Dryland]

I assume you edited this post after i replied to include CSS for 1024px, so haven’t try that code yet.

Therefore I just added it to the test site here

I agree re one issue at a time.

Cheers.

[Author]

Posts