How do I align my header content to the left on mobile?

Store Design
1

Hi Community,

i want the content of my header align left on mobile. same as on desktop

URL is: https://www.betanics.de

Could you please support?

Thanks

Kathie

2

Hi!

You want to find the block of code shown below and change the value from ‘center’ to ‘left’:

@media screen and (max-width: 768px)
.swiper-container:not(.slideshow--full-screen) .homepage-featured-content-box .homepage-featured-content-box-inner, .swiper-container:not(.slideshow--full-screen) .homepage-featured-content-box .homepage-featured-content-box-inner .featured-row__subtext, .swiper-container:not(.slideshow--full-screen) .homepage-featured-content-box .homepage-featured-content-box-inner .homepage-featured-box-btn, .swiper-container:not(.slideshow--full-screen) .homepage-featured-content-box .homepage-featured-content-box-inner .homepage-sections--title {
    text-align: center;
}

More than happy to request collaborator access and resolve for you if needed :slightly_smiling_face:

3

@Katharina_be
Hello,

.site-header__wrapper__center .lazyautosizes.ls-is-cached.lazyloaded {
  width: 100% !important;
}
.site-header__nav-standalone {
	width: 37%;
	position: absolute;
	top: 37%;
	left: 0;
	text-align: left !important;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme-index.min.scss.liquid or theme-index.min.css

Like This

oscprofessional_1-1658149029778.png
oscprofessional_1-1658149029778.png1661×738 217 KB

4

@oscprofessional

She wants the header banner content to be left aligned on mobile, not the main menu on desktop :slightly_smiling_face:

5

@WoodyDev

@media screen and (max-width: 768px)
.swiper-container:not(.slideshow--full-screen) .homepage-featured-content-box .homepage-featured-content-box-inner {
text-align: left !important;
}}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme-index.min.scss.liquid or theme-index.min.css

Like This Type ?

oscprofessional_0-1658149460257.png
oscprofessional_0-1658149460257.png467×582 209 KB

6

Hey @Katharina_be ,
Welcome to the Shopify community!
You can follow the instruction below:

@media screen and (max-width: 768px)
.swiper-container:not(.slideshow--full-screen) .homepage-featured-content-box .homepage-featured-content-box-inner {
text-align: left !important;
}}

please add this to your CSS file. If you feel like my answer is helpful, please Like and mark it as a solution**.** Let me know if you have any further questions.
Thank you!
Return Prime