Margin/padding issue, especially for mobile

Hi guys,

A new issue on the site that keeps on giving. I have a nav section at the bottom of some (project) pages above the footer. I’m trying to increase the margin above the section title “More Projects” to separate it from body text above it. Nothing I do works. It’s clearly being overridden by something that I just can’t find.

It has a class called “more-projects” on line 2683 of style.css Help on this is greatly appreciated.

I also added some bottom margin on line 2693 in the class “other-projects” to create some space between this section and the footer in mobile browsers. The issue w/that is too much space on the desktop. So how can I create the bottom padding to only target mobile and not desktop?

Finally, when I collapse the browser window to a mobile width and then expand it back to normal, the entire “More Projects” section jumps as if it’s centered in the left column (which it was previously). On refresh, it fixes - but why is it teasing me like that?

Examples are here:

http://ehydrant.com/sitepoint/car-dealer-app.html
http://ehydrant.com/sitepoint/css/style.css
http://ehydrant.com/sitepoint/css/projects.css

Thanks guys!

Hi there syakoban,

to to stop the jumping and to increase the space
above “More Projects” on mobiles, try this CSS…

.more-projects {
    clear: both;
 }
@media screen and (max-width: 20em)  { /* adjust value to suit */
.more-projects {
    padding-top: 3em; /* adjust value to suit */
  }
 }

coothead

Thanks coothead.

Maybe I wasn’t clear: I want more space above “More Projects” for all browsers and more space below, only for mobile.

But here is the WEIRD PART:

Locally it works differently than on-line. Two things happen: first, the more projects section and the “want to work together” flip. I copied the files locally to the server and they are the exact same files. I then copied them back and either way the problem happens. Plus, locally the jump still happens. I haven’t had a drink all weekend, I swear!

See what I mean:

____ on-line version on right (and how it should be)

What to do???

I don’t understand it, but when I use the code inspector and add top margin to the “more projects” section it has no effect and overlays the section above it. (???)

Hi there syakoban

try this CSS…

.more-projects {
    clear: both;
    padding-top: 5em; /* adjust value to suit */
 }
@media screen and (max-width: 22em)  { /* adjust value to suit */
.project {
    padding-bottom: 15em; /* adjust value to suit */
  }
 }

coothead

1 Like

Thanks again ccothead!

I think that does it, but I’m still testing. Nevertheless, the issue of shrinking the browser and the order flipping is still there. I just don’t get it.

I am not seeing that. :unhappy:

coothead

It’s totally weird. It only does it with the local file in both chrome and FF. I take the exact same files, same CSS and put them in tabs side by side and it does what I have in the screen shots.

Ultimately, if that’s all it is, it doesn’t matter. But I wonder if it means something else is wrong.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.