Need some simple (?) quick help with my portfolio site: centered text on mobile and margins/padding

[eric132]

I have two questions in one re: CSS edits for mobile.

Everything looks great on desktop - but on mobile:
a. My project title (All Souls Pizza) gets too close to the line above it / need to add padding there.
b. I’d like to add some padding above my Additional Info section (to give it a little bit more space between the body copy) AND make it left justified to match the body copy above.

Is anyone willing to take a look at this and help out!
If so - thank you so much.

This is my site:

All Souls Pizza — Homestead Studio

[PaulOB]

Hi,

I’m not sure if this is going to work live as you are dynamically adding styles inline and using custom html tags which may be subject to change.

However this works locally as you can see from the screenshot but whether it will work online remains to be seen

Add this CSS after all your other CSS files.

@media screen and (max-width: 682px) {
  .mobile .page-content h1 {
    padding-top: 2rem;
    margin-bottom: -1rem;
  }

  .mobile [slot="2"] {
    padding-top: 2rem;
  }

  .mobile [slot="2"] * {
    text-align: left !important;
  }
}

If it works it should look like this:

[eric132]

@PaulOB

@media screen and (max-width: 682px) {
  .mobile .page-content h1 {
    padding-top: 2rem;
    margin-bottom: -1rem;
  }

  .mobile [slot="2"] {
    padding-top: 2rem;
  }

  .mobile [slot="2"] * {
    text-align: left !important;
  }
}

Thank you / lifesaver - this worked perfectly. Much appreciated

And my favorite part about getting help with CSS is that I can reverse-engineer it to learn what it is that actually makes this work.