How to make the custom liquid design responsive in mobile

Store Design
,
1

I created custom code using below in Dawn theme.

https://jsfiddle.net/onceagain/jLc9s2tk/6/ How to make this code mobile responsive?

2

Hello @onceupon ,

Add this code on your live website and send website link, because jsfiddle no view on mobile.

1 Like
3

You can add media query for mobile after the css code and with (max-width: 768px) or any other relevant screenwidth value

and make the font smaller for your h4 and h3 in that media query. something like this

@media screen and (max-width: 768px) {
.section-template–19871714541903__faae35cc-94f2-4c27-8cd1-cceadec246b2-padding h4 {

font-size: // choose a smaller font value
}

.section-template–19871714541903__faae35cc-94f2-4c27-8cd1-cceadec246b2-padding h3 {

font-size: // choose a smaller font value
}

}

4

Code is already added and link sent to your mail.

1 Like
5

Hi @onceupon
You can add the media query in your css, for example:

If I looked at your jsfiddle, you are using the static section ID. My suggestion is to use a dynamic section ID, so the settings can be applied when you use the section twice. For example:
6

Hey there! I’ve decided to help you with the responsive design, so it automatically adjusts on different devices.

CSS updated:

.section-template--19871714541903__faae35cc-94f2-4c27-8cd1-cceadec246b2-padding {
  padding-top: calc(0px * 0.75);
  padding-bottom: calc(0px  * 0.75);
}

@media screen and (min-width: 750px) {
  .section-template--19871714541903__faae35cc-94f2-4c27-8cd1-cceadec246b2-padding {
    padding-top: 0px;
    padding-bottom: 0px;
  }
}

.myDay,
.myDay .subSection h4,
 .myDay .subSection h3
  {
    padding:0;
    margin:0;
}
.myDay .subSection  
{
    padding:0 0;
    margin:0;      
}
.myDay .subSection .eClick-left-6  
{
  position:relative;      
  background:url('https://cdn.shopify.com/s/files/1/0783/8230/1519/files/panties.png?v=1703738922');    
  padding:50px 0;
  background-size: cover;
  height: 270px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.myDay .subSection .eClick-right-6{
    position:relative;      
    background:url('https://cdn.shopify.com/s/files/1/0783/8230/1519/files/period.png?v=1703740096');    
    padding:50px 0;
    background-size: cover;
    height: 270px;
    margin-left: -125px;   
}

.myDay .subSection .container  
{
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: center;
}
.myDay .subSection h4,
.myDay .subSection h3 
{
    text-align:right;
}
.myDay .subSection h4
{
    color: #fff;
    font-size: 45px;
    font-family: "Yeseva One";
    font-weight: 400;
    line-height: 76px;
    text-transform: uppercase;
    padding: 0 170px 0 0;
    max-width: 800px;
    margin-left: auto;
}
.periodProducts .subSection h4{
    color: #68405A;
}
.myDay .subSection h3{
    color:#68405A;
    font-family: "Yeseva One";
    font-weight: 400;
    font-size: 80px;
    max-width: 530px;
    margin-right: 30px;
}

.myDay .subSection .eClick-right-6 p{
  color: #fff;
  font-family: "FuturaPT-Book";
  font-weight: 400;
  font-size: 30px;   
  margin-right: auto;
  text-align:center;
  line-height: 30px;
  padding: 0px;
  margin: 0px;
}

@media (min-width: 980px) and (max-width: 1079px) {
  .myDay .subSection .container {
    grid-template-columns: 2fr 1fr;
  }
}

@media (min-width: 900px) and (max-width: 979px) {
  .myDay .subSection .container {
    grid-template-columns: 2fr .7fr
  }
}

@media (max-width: 899px) {
  .myDay .subSection .container {
    display: initial;
  }
  .myDay .subSection .eClick-left-6 {
    height: auto;
    padding: 25px 0;
  }
  .myDay .subSection h4 {
    padding: 0;
    margin-left: 0;
  }
  .myDay .subSection h4, .myDay .subSection h3 {
    text-align: center;
  }
  .myDay .subSection .eClick-right-6 {
    background: unset;
    background-size: unset;
    display: flex;
    position: relative;
    margin: 0 auto;
    align-items: center;
    width: max-content;
    height: unset;
    padding: 25px;
    gap: 30px;
  }
  .myDay .subSection .eClick-right-6 p {
    color: black;
  }
}

@media (max-width: 630px) {
  .myDay .subSection .eClick-right-6 {
    display: grid;
    gap: 10px;
  }
  .myDay .subSection h3 {
    margin-right: 0px;
    font-size: 60px;
  }
  .myDay .subSection h4 {
    font-size: 35px;
    line-height: normal;
  }
  .myDay .subSection .eClick-left-6 {
    background-size: 600px;
  }
  .myDay .subSection .eClick-right-6 p {
    font-size: 25px;
  }
}

PC

PC.PNG
PC.PNG1899×463 133 KB

TABLET

TABLET.PNG
TABLET.PNG868×458 74.3 KB

MOBILE

MOBILE.PNG
MOBILE.PNG231×371 30.5 KB

Hope you like it! Merry Christmas and Happy New Year!

7

Thank you @Spac-es Please remove the screenshot