How can I center align and resize the 'IPHONE' tab in the Story theme?

[Darius10]

Hello I would like that this information to be on the centre. Also I want that “IPHONE” tab would be smaller.

Theme - story

could someone help me with this?

[suyash1]

@Darius10 - can you please share this page link?

[Darius10]

www.treats.lt

pasword: xampoh

[Darius10]

@suyash1

[suyash1]

@Darius10 - please add this css to the end of theme.css file and check

@media screen and (max-width:749px){
.product__form__wrapper{text-align: center;}

.product__title__wrapper{justify-content: center;}

.product__price__wrap{justify-content: center;}

.product__details{text-align: center;}

.quantity__wrapper{margin: 0 auto;    margin-bottom: 1em;}

.select-popout{max-width: 60%;    margin: 0 auto;}

.select-popout__toggle{text-align: center;}

.select-popout__option{text-align: center;}
}

[Darius10]

Thank you for your help. I did as you said but nothing changes. Same situation

@suyash1

[suyash1]

@Darius10 - I can not see the code added to theme.css file

[Darius10]

I after delete it. Now I add again.

@suyash1

[suyash1]

@Darius10 - sorry my mistake, please change word ‘max’ to ‘min’ so it becomes

@media screen and (min-width:749px)

everything else will just be the same

[Darius10]

Done. But same situation.

@suyash1

[suyash1]

@Darius10 - do you see this selected line in image 1 before custom code line? it has extra bracket “}”

please remove it so it becomes line image 2.

[Darius10]

Thank you. One more question with mobile. Also want that text be in the center and price be under the photo.

@suyash1

[suyash1]

@Darius10 - to make it center on mobile too, please remove the media query line

“@media screen and (min-width:749px){” and the very last “}”

so only this code given below remains , it will take it to center on mobile to

adding price below photo is not possible without code editing is not possible as it is part of separate containers

.product__form__wrapper{text-align: center;}

.product__title__wrapper{justify-content: center;}

.product__price__wrap{justify-content: center;}

.product__details{text-align: center;}

.quantity__wrapper{margin: 0 auto;    margin-bottom: 1em;}

.select-popout{max-width: 60%;    margin: 0 auto;}

.select-popout__toggle{text-align: center;}

.select-popout__option{text-align: center;}

[Darius10]

thank you. One more question. I want that “Apie produktą” and “Kodėl turėtum pasirinkti mus” would be left align.

[suyash1]

@Darius10 - please add this too

.product-accordion{text-align: left;}

[Darius10]

Thank you.