Mobile responsive HTML

Highlighted
New Member
3 0 0

Any advice on how to get this code to be mobile responsive would be so helpful! Perferably the image stacks above and container box with text and two buttons below it. 

HTML: 

 

<style>
h1 {text-align: center;}
p {text-align: center;}
div {text-align: center;}
</style>
<div class="container">
<img src="https://cdn.shopify.com/s/files/1/0441/3580/9179/files/ClothesMentor_ShopOnline_HomeBanner.jpg?v=160..." style="width:100%;">
<div class="text-block">
<p>
</p>
<form class="form-inline"></form>
<h4>Shop in store or online<br>
earn cash in store
<br>
<br>
<button class="btn btn-primary btn-inline"><a href="https://shop-clothes-mentor.myshopify.com/collections">Shop with us</a></button>
<button class="btn btn-primary btn-inline"><a href="https://shop-clothes-mentor.myshopify.com/pages/sell">Sell to us</a></button>

<br>
</h4>
</div>
</div>

 

CSS: 

/* Container holding the image and the text */
.container {
position: relative;
}

/* Center right text */
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: White;
text-color: white;
color: white;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
}

 

 

Any help would be so appreciated!! TIA!

 

0 Likes
Highlighted

Hello.....
Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.

 

& define the things you want to be proper in mobile view !

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes