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

[Katharina_be]

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

[WoodyDev]

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 🙂

[oscprofessional]

@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

[WoodyDev]

@oscprofessional 

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

[oscprofessional]

@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 ?

[ReturnPrime]

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