How to make custom content html responsive?

New Member
44 0 0

Hello,

 

I have added a custom content section on my website with html, this includes a title with a grid with images inside each block.

Problem is the images get smaller on the mobile website instead of stacking on top of each other. The code is somehow unresponsive on mobile.

What code can i add to make it responsive? 

 

btw the code i used is below

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

Many thanks!

0 Likes

Hello @MSY92,

Please share your site url so that I will give you exact solution

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
0 Likes
New Member
44 0 0

moochimoochi.com

 

Thanks!

0 Likes
New Member
44 0 0

@oscprofessional moochimoochi.com

0 Likes

@MSY92,

Are you talking about below section

2019-12-31_11-43.jpg

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
0 Likes
New Member
44 0 0

I tried to put my images inside a css grid using the code below but i cant get them to cascade and be responsive on mobile device???

 

<style>
.grid-container {
  display: block;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 90px;
  text-align: center;
  min-width: 150px
}

@media screen and (min-width: 400px) {
	.grid-container.responsive {
		float: none; width: 100%;
		display: block;
	}
}
</style>
</head>
<body>



<h1>The display Property:</h1>

<div class="grid-container">
  <div class="grid-item"><img class="responsive" src="https://cdn.shopify.com/s/files/1/0258/9124/2043/files/Derma_illustration_1.png?v=1577241359"></div>
  <div class="grid-item">2</div>
  <div class="grid-item"><img class="responsive" src="https://cdn.shopify.com/s/files/1/0258/9124/2043/files/Derma_illustration_2.png?v=1577241392"></div>  
  <div class="grid-item">4</div>
  <div class="grid-item"><img class="responsive" src="https://cdn.shopify.com/s/files/1/0258/9124/2043/files/Derma_illustration_3.png?v=1577241408"></div>
  <div class="grid-item">6</div>  

</div>
0 Likes
New Member
44 0 0

@oscprofessional yes thats it

0 Likes

@MSY92,,

Do you want like this

2019-12-31_11-49.jpg

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
0 Likes
New Member
44 0 0

@oscprofessional Yes something like that, can you look again at the website. At the top thats what im trying to get for the pc, but when i change to mobile it should cascade and stack on top of each other

 

131ce093e5c1f4d7d79385c92849c55d.png

0 Likes
New Member
44 0 0

@oscprofessional On mobile its suppose to stack together like 1x6 not 2x3.

 

 

4578ef85c0e252c9f3f32f948b80b3e1.png

0 Likes