PRO Header Mobile assistance :)

[Noellemena]

Hey! Could you please assist me with this issue? I did a quick video for you and also included login to the dev site.
Thank you so much!

Noelle

[jade]

Hey Noelle,

Please do the following:

Set the background-position of the bar to left center

Add a media query to the container element of Bar 2 where there is a 600px left padding to adjust the padding on certain device size.

@media (max-width: 768px) {
  $el {
    padding-left: 0 !important;
  }
}

Element CSS | Themeco Docs

Please note that the code above will only remove the large space on the left side of the text in the second bar.

The text will show above the photo of Jeanna Oliver so you might need to apply some design changes for the mobile view.

Lastly, to stack the text below the second bar, edit the container setting of the bar 3 the enable the wrap children option

Hope this helps.

[Noellemena]

Thank you, I made the change to the first issue and then created separated versions per device to get it the way I wanted it.

The text part that you gave me element css is not working correctly. It is still stacking very off. There is enough room even on the smallest device for the phrases to just stack on top of each other. Is there an easier way then me creating different versions of this area too per device for mobile? Thank you so much!
Noelle

[Noellemena]

I went ahead and added new bars for mobile only for each of these. All good.
Thank you!!

Noelle

[lely]

Glad this is now sorted out Noelle!

Cheers.