Formatting issues on home screen

[alexlomt1]

 

 

I have several formatting errors on the mobile version of my website. Please see the photos. In the hero section, the text is not fully visible. 

then when you scroll further down, CerebrumForge is not centered properly 

website: https://mmz7sv-mw.myshopify.com/

password: seupri

[Mustafa_Ali]

<style>
@media screen and (max-width: 767px) {
h1.headline {
    font-size: 20px !important;
 } 
}
</style>

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the <style> tag before the body ----->
if this code work please do not forget to like and mark it solution

[CodingFifty · Accepted solution]

Hi @alexlomt1,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

@media (max-width: 768px){
#shopify-section-1489283389016 h1 {
    font-weight: bold;
    font-size: 20px !important;
}
}

[alexlomt1]

Hello. Thank you, this works but how can I fix the second issue - the centering of the "CerebrumForge" text? 

[Moeed]

Hey @alexlomt1 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
.image-element__wrap img {
    height: 700px !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[alexlomt1]

Thanks. What about the second photo? How can I fix the centering issue?

[CafeDelMar]

It will auto-center itself if you apply MustafA16`s solution. The text and the word is just too big for that screen, this is why it overflows to the right.

 

[alexlomt1]

But then it also does double line on the shop now button which it shouldn't do

[alexlomt1]

Also it messes up and streches other parts it shouldn’t 

 

[Mustafa_Ali]

<style>
@media screen and (max-width: 767px) {
a.action_button.first_button.highlight-true {
    width: 45%;
 }
img.transition--blur-up.lazyautosizes.lazyloaded {
    height: 100% !important;
 }
.caption .headline {
        font-size: 30.333333px !important;
 }
}
</style>

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the <style> tag before the body ----->
if this code work please do not forget to like and mark it solution

[alexlomt1]