Shopify Question posted in
The Shopify help center can be found here.

Clear:both to stack two divs on top of eachother (inside parent div) – Shopify

I have managed to achieve stacking two divs on top of eachother for the mobile at 480px by using clear:both (.vd-grid-xtra-box). They are inside a parent div. Unfortunately, I am trying to set them both at 100% width for the mobile but they are not responding. Why is this the case?

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>Vivid Shop Display</title>
<link rel="stylesheet" href='css/vivid-style.css'>
<link rel='stylesheet' href='css/scroller.css'>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>

<body>
<header>
<div class="vd-navigation-wrapper">
     <div class="vd-settings-wrapper">
        <div class="vd-user-settings">
        </div>
        <div class="vd-currency-selector">
        </div>
        <div class="vd-language-selector">
        </div>
     </div>
     <div class="vd-nav-wrapper">
            <ul>
                <li>Shop</li>
                <li>About</li>
                <li class="vd-logo-img"><img src="img/vivid_logo.png"/></li>
                <li>Lookbook</li>
                <li>Contact</li>
            </ul>
     </div>
      <div class="vd-cart-wrapper">
       <div class="vd-cart-selector"></div>
      </div>

</div>

<!--Mobile Navigation-->
  <nav class="vd-hide">
  <div class="header-top clearfix">
   <a class="nav toggle-menu" href="#">
      <i></i>
      <i></i>
      <i></i>
    </a>
    <h1 class="logo"><a href="#firstSection"><img src="img/harva_logo.png"/></a></h1>
  </div>
    <ul id="menu">
      <li data-menuanchor="firstSection">
        <a href="#firstSection" title="First Section">First Section</a>
      </li>
      <li data-menuanchor="secondSection">
        <a href="#secondSection" title="Second Section">Second Section</a>
      </li>
      <li data-menuanchor="thirdSection">
        <a href="#thirdSection" title="Second Section">Third Section</a>
      </li>
      <li data-menuanchor="fourthSection">
        <a href="#fourthSection" title="Fourth Section">Fourth Section</a>
      </li>
      <li data-menuanchor="fifthSection">
        <a href="#fifthSection" title="First Slide">First Slide</a>
      </li>
      <li data-menuanchor="fifthSection/1">
        <a href="#fifthSection/1" title="Second Slide">Second Slide</a>
      </li>
    </ul>
  </nav>
  </div>
 </header>
<!--End Mobile Navigation-->

<div class="vd-page-container">
 <div class="vd-grid">
  <div class="vd-grid-left-col">
    <div class="vd-grid-main-box vd-margin-bottom">
     <div class="vd-text-wrap">
        <h1>Header Text</h1>
        <h2>Secondary Title</h2>
        <p>Featured Text Here over two lines
if needed place here.</p>
</div>
    </div>

    <div class="vd-grid-sub-box">
        <h3>Header Text</h3>
        <p>Featured Text Here over two lines
if needed place here.</p>
    </div>
    <div class="vd-grid-sub-box vd-margin-right vd-margin-left">
        <h3>Header Text</h3>
        <p>Featured Text Here over two lines
if needed place here.</p>
    </div>
    <div class="vd-grid-sub-box">
        <h3>Header Text</h3>
        <p>Featured Text Here over two lines
if needed place here.</p>
    </div>
   </div>
    <div class="vd-grid-right-col vd-margin-left">
     <div class="vd-grid-xtra-box">
      <h4>Header Text</h4>
      <p>Featured Text Here over two lines
if needed place here.</p>
     </div>
      <div class="vd-grid-xtra-box vd-margin-top vd-margin-bottom">
     <h4>Header Text</h4>
      <p>Featured Text Here over two lines
if needed place here.</p>
     </div>
    </div>
 </div>
</div>
<div class="clear"></div>
    <footer class="vd-footer">
       <div class="vd-widget-area">
        <div class="vd-footer-text">
            <h4 class="vd-footer-title">V I V I D - SHOPIFY THEME</h4>
          <div class="rte">V I V I D is a customisable theme that looks and feels fantastic. Showcase your products on the visually stunning V I V I D Grid and choose your structure then let V I V I D do the rest!</div>
        </div>
          <div class="vd-footer-links">
              <h4 class="vd-footer-title">HELP</h4>
            <ul>
                <li><a class="" href="#">HELP | FAQ'S</a></li>
                <li><a class="" href="#">RETURNS</a></li>
                <li><a class="" href="#">HOW TO SHOP</a></li>
                <li><a class="" href="#">CONTACT US</a></li>
                <li><a class="" href="#">STOCKISTS</a></li>
            </ul>
          </div>
         <div class="vd-footer-links">
          <h4 class="vd-footer-title">POLICIES</h4>
            <ul>
                <li><a class="" href="#">DELIVERY &amp; RETURNS POLICY</a></li>
                <li><a class="" href="#">TERMS &amp; CONDITIONS</a></li>
                <li><a class="" href="#">PRIVACY POLICY</a></li>
                <li><a class="" href="#">SECURITY POLICY</a></li>
            </ul>
          </div>
    <div class="vd-footer-links">
         <h4 class="vd-footer-title">CONNECT</h4>
            <ul>
                <li><a class="vd-social-icon facebook" href="#" target="_blank">FACEBOOK</a></li>
                <li><a class="vd-social-icon twitter" href="#" target="_blank">TWITTER</a></li>
                <li><a class="vd-social-icon instagram" href="#" target="_blank">INSTAGRAM</a></li>
                <li><a class="vd-social-icon vimeo" href="#" target="_blank">VIMEO</a></li>
            </ul>
          </div>
        <div class="vd-signup">
            <h4 class="vd-footer-title">SIGN UP TO OUR NEWSLETTER</h4>
          <div class="wht">HTML Block to be added here for embedded email capture forms</div>
        </div>
    </div>
  <div class="vd-sub-footer">
      <ul class="vd-payment-options">
          <li class="vd-payment-icon american-express"></li>
          <li class="vd-payment-icon bitcoin"></li>
          <li class="vd-payment-icon jcb"></li> 
          <li class="vd-payment-icon master"></li>
          <li class="vd-payment-icon paypal"></li>
          <li class="vd-payment-icon visa"></li> 
      </ul>
    <div class="vd-copyright-wrapper">
      <p class="vd-copyright">Copyright © 2017 V I V I D Themes.</p>
      <p class="vd-attribution">"Virtual Visual Merchandising"</p>
    </div>
  </div>
</footer>
</body>
</html>

CSS:

@charset "UTF-8";

/* CSS Document */

/*Vivid Global Styling*/

html {} body {
  margin: 0px;
  padding: 0px;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
span {
  margin: 0px;
  padding: 0px;
}
h1 {
  margin: 0 0 14px 0;
}
h2 {
  margin: 0 0 10px 0;
}
.wht {
  color: #fff;
}
.clear {
  clear: both;
}
/*Vivid Page Settings*/

header {
  width: 100%;
  background-color: #fff;
  border-bottom: #000 1px solid;
}
.vd-hide {
  display: none;
}
.vd-settings-wrapper {
  width: 15%;
  max-width: 200px;
}
.vd-user-settings {
  width: 48px;
  height: 48px;
  border: 1px solid #000;
  background-color: #fff;
  float: left;
  margin: 12px 2px 0 21px;
}
.vd-currency-selector {
  width: 58px;
  height: 21px;
  border: 1px solid #000;
  background-color: #fff;
  float: left;
  margin: 12px 2px 1px 2px;
}
.vd-language-selector {
  width: 58px;
  height: 21px;
  border: 1px solid #000;
  background-color: #fff;
  float: left;
  margin: 3px 2px 0 2px;
}
/*Vivid Main Navigation*/

.vd-nav-wrapper {
  width: 75%;
  height: 78px;
  margin: 0 auto;
  text-align: center;
}
.vd-nav-wrapper ul {
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.vd-nav-wrapper li {
  text-decoration: none;
  list-style: none;
  display: inline-block;
  margin: 22px 20px;
  vertical-align: middle;
}
.vd-nav-wrapper a {
  text-decoration: none;
  list-style: none;
  display: inline-block;
  margin: 18px 20px;
  vertical-align: middle;
}
.vd-logo-img {
  margin: 0px;
  padding: 0px;
}
/*Vivid Checkout Settings*/

.vd-cart-wrapper {
  width: 10%;
  z-index: 10;
}
.vd-cart-selector {
  width: 48px;
  height: 48px;
  border: 1px solid #000;
  background-color: #fff;
  margin: -11px 31px 0 2px;
  position: absolute;
  top: 23px;
  right: -9px;
}
/*Vivid Main Wrapper*/

.vd-page-container {
  width: 100%;
  margin: 0 auto;
}
/*Vivid Grid*/

.vd-grid h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Montserrat', sans-serif;
  line-height: 32px;
  color: #fff;
}
.vd-grid p,
span {
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  line-height: 17px;
  font-size: 0.85em;
  margin: 0;
  padding: 0;
  color: #fff;
}
.vd-grid h1 {
  margin: 0;
  padding: 0;
}
.vd-grid h2 {
  font-size: 1.2em;
  margin: 0 0 4px 0;
}
.vd-grid h3 {
  margin: 4px 0 4px 0;
}
.vd-grid h4 {
  margin: 4px 0 4px 0;
}
.vd-grid {
  width: 98.6%;
  margin: 13px auto;
}
.vd-grid-left-col {
  width: 77.6%;
  float: left;
}
.vd-grid-right-col {
  width: 20.8%;
  float: left;
}
.vd-grid-main-box {
  width: 93.5%;
  height: 460px;
  background-color: #000029;
  padding: 3.2%;
}
.vd-grid-main-box img {
  width: 100%;
  height: auto;
  position: absolute;
}
.vd-grid-sub-box {
  width: 30.8%;
  height: 159px;
  background-image: url(../img/granda_hj.jpg);
  background-size: cover;
  background-position: top center;
  background-color: #000029;
  float: left;
  padding: 0.9%;
  margin: 0 0 1% 0.2%;
}
.vd-grid-xtra-box {
  width: 94%;
  height: 332px;
  background-image: url(../img/tst_img.jpg);
  background-size: cover;
  background-position: center center;
  background-color: #000029;
  padding: 3%;
}
.vd-text-wrap {
  width: 100%;
  position: relative;
  top: 340px;
  left: 0px;
}
.vd-margin-top {
  margin-top: 4%;
}
.vd-margin-right {
  /*! margin-right:10px; */
  margin-right: 1%;
}
.vd-margin-left {
  /*! margin-left:10px; */
  margin-left: 0.8%;
}
.vd-margin-bottom {
  margin-bottom: 1%;
}
/*Vivid Footer*/

.vd-footer {
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  line-height: 16px;
  padding: 0 30px;
  padding-bottom: 55px;
  background-color: #000029;
  -webkit-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), -moz-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.vd-widget-area {
  padding: 15px 0 10px;
  border-top: 0px solid #e5e5e5;
  max-width: 1260px;
  margin: 0 auto 0px;
}
.vd-footer-text {
  display: inline-block;
  vertical-align: top;
  width: 26%;
  padding-right: 60px;
  font-size: 12px;
  color: white;
  -moz-font-smoothing: none;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vd-footer-links {
  display: inline-block;
  vertical-align: top;
  padding: 0 30px 25px 0;
  width: 12%;
  line-height: 22px;
  font-size: 12px;
  color: white;
}
.vd-footer-links ul {
  margin: 0;
  padding: 0;
  list-style: outside none;
  display: block;
  vertical-align: top;
}
.vd-footer-links li {
  font-size: 12px;
  color: white;
  text-decoration: none;
}
.vd-footer-links a {
  font-size: 12px;
  color: #ccc;
  text-decoration: none;
}
.vd-footer-links a:hover {
  font-size: 12px;
  color: white;
}
.vd-footer-title {
  font-family: 'Montserrat', sans-serif;
}
.vd-signup {
  display: inline-block;
  max-width: 305px;
  width: 26%;
  font-size: 12px;
}
.vd-sub-footer {
  border-top: 1px solid #e5e5e5;
  padding-top: 25px;
  margin-top: 0px;
  font-size: 0;
  max-width: 1260px;
  margin: 0 auto;
}
/*Vivid Payment Icons*/

.vd-payment-icon {
  font-size: 20px;
  vertical-align: middle;
  line-height: 1.2;
  color: #a7a7a7;
}
.vd-footer-linklist .vd-social-icon:before {
  font-size: 16px;
  width: 16px;
  text-align: center;
  margin-right: 5px;
  font-family: 'Social Icons';
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
  speak: none;
  text-decoration: inherit;
  text-transform: none;
  text-rendering: optimizeLegibility;
  -moz-font-smoothing: none;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vd-payment-options {
  float: right;
  width: 50%;
  margin: 0;
  padding: 0;
  text-align: right;
  font-size: 12px;
  text-decoration: none;
  display: block;
  list-style: outside none;
}
.vd-payment-options ul {
  display: block-inline;
  list-style-type: outside none;
}
.vd-payment-options li {
  display: block-inline;
  float: right;
  padding: 0 0 0 10px;
  list-style-type: outside none;
}
.american-express:before {
  content: "f001";
}
.bitcoin:before {
  content: "f006";
}
.jcb:before {
  content: "f028";
}
.master:before {
  content: "f02d";
}
.paypal:before {
  content: "f033";
}
.visa:before {
  content: "f045";
}
/*Vivid Copyright*/

.vd-copyright-wrapper {
  float: left;
  margin: 0;
  width: 50%;
  font-size: 12px;
  color: white;
  -moz-font-smoothing: none;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
}
/*Vivid Responsive*/

@media (min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {}

@media screen and (max-width: 928px) {
  .vd-grid-left-col {
    width: 100%;
  }
  .vd-grid-right-col {
    overflow: hidden;
    width: 100%;
    margin: 0;
    clear: both;
  }
  .vd-grid-right-col > div {
    width: 49%;
    box-sizing: border-box;
    margin: 0;
  }
  .vd-grid-right-col > div:first-child {
    margin-right:2%;
  }
  .vd-grid-xtra-box {
    float: left;
  }
  .vd-footer{
    margin-top: 20px;  
  }
}

@media screen and (max-width: 480px) {

    .vd-grid-sub-box {

        width: 100%;
    }

    .vd-grid-xtra-box {

    clear: both;
    width: 100%
    display: block;


    }

    .vd-grid-right-col {

    width: 100%

    }
}
Tags:

3

Answers


  1. 0

    It’s a CSS specificity issue. Target those elements via this selector in your media query

      .vd-grid-right-col > div {
    width: auto;
    float: none;
  }
    Login or Signup to reply.
  2. 0

    I don’t know whether I can tell what you want to know, but I’m going to try.

    First: I think you missunderstood the html tag clear.
    Second: clear doesn’t do anything without a float.
    Third: In this example you haven’t even used a float neither .clear

    That is why it isn’t working.

    What to do now to make it working?
    If you want to have them just one at the top, second under the first you only have not to tell them to appear at another place. (You didn’t show all css, did you?)

    You could also use a flex-layout, which I prefer.more about flex layout
    Another way: use some css just for mobile: in the beginning of the css you do this:

    @media screen and (min-width: 768px) {

    and you close it with “}”
    (This was how to use a css only for big screens. You can also use max-width to use something only for mobile screens.
    Hope I could help

    Login or Signup to reply.
  3. 0

    Have you tried calling it inside media queries like below?

    @media all and (max-width:480px) {
 .vd-grid-xtra-box{
   width:100%;
   float:none;
   clear:both;
 }    
}

    Hope this will work out for you. Also make sure that you haven’t used !important code property to above class in any other css rule.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search