optimise text on banner for mobile

Solved
Excursionist
28 0 0

IMG_0212.PNG

The image on the slide is optimised for mobile, but not the text(buttons and all). How do I make them such that they fall within the pic? like the one on desktop.

website: https://6cuenlp4h5cy8un3-707682.shopifypreview.com

0 Likes
Highlighted

Success.

Hello @wwqqq,

Please add below css

@media (max-width: 600px) {
.velassCaption {
	top: 35%;
}
.caption-center .velassCaptionContent {
	-webkit-transform: translate(-15%, -50%);
	-ms-transform: translate(-15%, -50%);
	-o-transform: translate(-15%, -50%);
	transform: translate(-15%, -50%);
}
}
@media (max-width: 480px) {
 .btnVelaSlider {
  margin-top:5px;
  padding:5px 30px;
 }
.velassHeading {
	font-size: 1.8em;
}

.caption-center .velassCaptionContent {
	-webkit-transform: translate(-20%, -50%);
	-ms-transform: translate(-20%, -50%);
	-o-transform: translate(-20%, -50%);
	transform: translate(-20%, -50%);
}
}
@media (max-width: 360px) {
.velassCaption {
	top: 20%;
}
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like