Column disappears on mobile

user_18896535 0
Viewed 43

I'm using this code to create 4 responsive columns for my website, and if I try running the code on the Tryit editor it works perfectly, but when I use it on my shopify homepage and I try to resize the window, the columns disappear (on smartphone too). What could be wrong in the code?

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Container for flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Create four equal columns */
.column {
  flex: 25%;
  padding: 20px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

@media only screen and (max-width: 767px) {
    body {
        text-align: center;
    }
}


</style>
</head>
<body>

<div class="row">
  <div class="column" style="background-color:transparent;">
    <p style="color:#f8f8ff;font-size:1em"><strong>COLUMN1</strong>
    <p style="font-size:0.9em;">Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  </div>
  
  <div class="column" style="background-color:transparent;">
    <p style="color:#f8f8ff;font-size:1em"><strong>COLUMN2</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  </div>
  
  <div class="column" style="background-color:transparent;">
    <p style="color:#f8f8ff;font-size:1em"><strong>COLUMN3</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  </div>
  
  <div class="column" style="background-color:transparent;">
    <p style="color:#f8f8ff;font-size:1em"><strong>COLUMN4</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  </div>
</div>

</body>
</html>

shopify responsive css html
1 Answers

it happened due to CSS overlap in your theme. some CSS is overlapping on your this page CSS use "!important" in your CSS it will work perfectly.

use this below CSS code:-

<style>
* {
  box-sizing: border-box !important;
}

/* Container for flexboxes */
.row {
  display: flex !important;
  flex-wrap: wrap !important;
}

/* Create four equal columns */
.column {
  flex: 25% !important;
  padding: 20px !important;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 50% !important;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column !important;
  }
}

@media only screen and (max-width: 767px) {
    body {
        text-align: center !important;
    }
}


</style>
user_187449630
Related