Dawn Theme - Mobile - Hero Banner image & text alignment

[Tiff0011]

Hello I’m trying to make the image of the hero banner align on a mobile screen. It crops

the top half off at the moment. See image below.

also, the text is way to big and doesn’t have the same alignment as it looks on a desktop. See desktop view below.

[oscprofessional]

@Tiff0011
Hello,

section#hero .container .d-flex {
  justify-content: center !important;
}
#hero .container {
  text-align: center;
}

Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->style.scss.liquid

[Tiff0011]

@oscprofessional @Sorry this doesn’t work. I want the mobile hero text to be to the left like it shows on the desktop and I want it to me significantly smaller too, similar ratio to the desktop view

[shubhamSharma]

@Tiff0011

please share store url and password

[Tiff0011]

My website page is https://tiffenyofficial.com/

Password is ‘pix’

@shubhamSharma

[shubhamSharma]

step 01:

1. Go to your Store > Theme > click to edit code.
2. find this file "base.css " and open.

step 02:

1. Paste the code at the end of the file.

@media only screen and (max-width:768px){
	
.fixed-top {
    position: initial !important;
}

#hero .container {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
}
}

[Tiff0011]

Thank you for your response

When I post the above code this is what it does:

[shubhamSharma]

replace this code

#hero .container {
    position: absolute !important;
    bottom: 1.5rem;
    left: 1.5rem;
}

[Tiff0011]

@shubhamSharma

It has cropped the hero banner image again. Also, how do i make the font smaller on the mobile device? about 50% smaller

[shubhamSharma]

@Tiff0011

step 01:

1. Go to your Store > Theme > click to edit code.
2. find this file "theme.liquid " and open.

step 02:

1. Paste the code at the end of the file.

this idea helps you