Issue with hero__title on mobile (Streamline Theme)

Highlighted
New Member
1 0 0

Hey guys,

I'm having an issue regarding several mobile device sizes with that template and my hero__title (Iphone X and so on).

When I check the code via chrome the text size is adjusted to 48px, although in my theme.css.liquid it has fixed sizes. When I uncheck the box (font-size:48px) it is displayed correctly (font-size:40px), but I don't know how to fix it in the backend. Could someone help me out here?

Ugly line breakUgly line break

@media only screen and (min-width:769px){

.hero__text-content{
padding:60px 0
}
}

.hero__title{
display:block;
margin-bottom:0;
font-size:40px
}

@media only screen and (min-width:769px){

.hero__title{
font-size:80px
}
}

.hero__subtext{
margin-top:20px;
}

.hero__subtitle{
font-size:calc(var(--typeBaseSize)*1.22*0.85)
}

@media only screen and (min-width:769px){

.hero__subtitle{
font-size:calc(var(--typeBaseSize)*1.22)
}
}

.hero__subtitle{
vertical-align:middle;
margin-top:5px
}

@media only screen and (min-width:769px){

.hero__subtitle{
display:inline-block;
margin-top:12px;
margin-right:20px
}
}

So this is a part of my theme.css.liquid.

Thank you so much and best regards, Nick.

0 Likes