Banner breaks on smaller screens

[Daniel19901]

Hi, I edited my main hero banner on my 1920*1080, and it look good, but now when I open the store on a smaller screen size it looks completely broken. Can anyone help me fix this ?https://aaba5d-52.myshopify.com/

[Sheesh_b · Accepted solution]

Hi @Daniel19901 

You can add the below css in theme.liquid just before </head>

<style>
@media screen and (min-width: 1025px){
.t4s-hero-image .t4s-hero-inner .t4s-content-wrap.t4s-bg-cl-wrap {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: auto;
}
.t4s-hero-inner .t4s-content-position.t4s-container {
	position: relative;
}
}
</style>

Let me know if that help.

Thanks

Sheesh B