Issue with header on homepage - text overlapping especially on mobile

[aspiretoretire]

Hey! Can't figure this out for the life of me. The header text will overlap on desktop AND it's even worse on mobile. How do I fix this? Website is - https://andreafohrman.com/

Thanks in advance!

[aspiretoretire]

Hey! I actually tried building a new shopify website with the theme called 'Motion' which resolved the landing page issue.. but there's a 'find your moon phase' calendar thing (https://andreafohrman.com/collections/moonphasefinder) that is coded into the old 'Dawn' theme that I can't easily transfer over. I've reinstated the 'Dawn' theme now and you must've taken a look at this during the time period that I had turned on the Motion theme.. Any idea how I could transfer over the calendar coding from Dawn to Motion? That would be our #1 choice. Thank you so much in advance!

[Dan-From-Ryviu]

Hi @aspiretoretire 

Did you turn off your announcement bar to solve the problem? If so, could you enable it again so I can give you the code to solve it? 

Best regards,

Dan from Ryviu

[namphan]

Hi @aspiretoretire,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

.SectionHeader__Heading.Heading.u-h1 {
    line-height: normal !important;
}

[aspiretoretire]

That seemed to work!! But now the button is a bit misplaced. Do you know how to fix that?

[namphan]

Hi @aspiretoretire,

Please add code:

@media screen and (max-width: 767px) {
.SectionHeader__Heading.Heading.u-h1 {
    margin-top: 0px;
}
.SectionHeader__SubHeading.Heading.u-h4 {
    padding: 0 !important;
    margin-top: 5px !important;
    margin-bottom: 10px !important;
}
}