CODEWITHSUNDEEP
htmlcss
Vishal Pandey
Vishal Pandey

Reputation: 41

Vertically align divs for mobile view

I have 5 div side by side in the desktop view. I have used "display:block-inline" to achieve this.

For my mobile view, I have used media query and set the display to "display: block" so that they align vertically in mobile devices.

However, when I switch to mobile view, the divs are aligning vertically one after the other, but I am losing the styling which is there in the desktop view. Like background color and text color.

I cannot understand why this is happening.

Any help would be appreciated.

PS: I have an obligation not to use Bootstrap

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #222222;
}

li {
  float: left;
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #F98900;
}

nav[role="sub"] ul {
  background-color: #525252;
}

nav[role="sub"] li a:hover {
  text-decoration: underline;
  background: #525252;
  color: #F98900;
}

nav[role="main"] ul {
  background-color: #222222;
}

.block {
  display: inline-block;
}

.mml
/*manual margin to left */

{
  margin-left: 2%;
}

.dailystatus {
  color: #ABABA7;
  background-color: #343434;
}

.mpl {
  padding-left: 4em;
}

@media(max-width:500px) {
  .mpl {
    padding-left: 1em;
  }
  .mmt {
    margin-top: 1em;
  }
  .block2 {
    display: block;
  }
}

.width {
  width: 15%;
}
<div class="mml">
  <p> Your task view all</p>
  <div class="width block dailystatus block2">
    <p>Follow Up 05:30pm</p>
    <p>Ashwin Kumar</p>
    <p>Brigade Group</p>
    <p>Contact</p>
    <p>[email protected]</p>
    <p>+91 8965238745</p>
    <p>City</p>
    <p>Bangalore</p>
    <p>Lorem ipsum dolor sit amet, no sea altera primis blandit, id nam cibo labitur. In iuvaret bonorum argumentum eum
    </p>
    <p></p>
  </div>
  <div class="width block mml dailystatus block2">
    <p>Follow Up 05:30pm</p>
    <p>Ashwin Kumar</p>
    <p>Brigade Group</p>
    <p>Contact</p>
    <p>[email protected]</p>
    <p>+91 8965238745</p>
    <p>City</p>
    <p>Bangalore</p>
    <p>Lorem ipsum dolor sit amet, no sea altera primis blandit, id nam cibo labitur. In iuvaret bonorum argumentum eum
    </p>
    <p></p>
  </div>
  <div class="width block mml dailystatus block2">
    <p>Follow Up 05:30pm</p>
    <p>Ashwin Kumar</p>
    <p>Brigade Group</p>
    <p>Contact</p>
    <p>[email protected]</p>
    <p>+91 8965238745</p>
    <p>City</p>
    <p>Bangalore</p>
    <p>Lorem ipsum dolor sit amet, no sea altera primis blandit, id nam cibo labitur. In iuvaret bonorum argumentum eum
    </p>
    <p></p>
  </div>
  <div class="width block mml dailystatus block2">
    <p>Follow Up 05:30pm</p>
    <p>Ashwin Kumar</p>
    <p>Brigade Group</p>
    <p>Contact</p>
    <p>[email protected]</p>
    <p>+91 8965238745</p>
    <p>City</p>
    <p>Bangalore</p>
    <p>Lorem ipsum dolor sit amet, no sea altera primis blandit, id nam cibo labitur. In iuvaret bonorum argumentum eum
    </p>
    <p></p>
  </div>
  <div class="width block mml dailystatus block2">
    <p>Follow Up 05:30pm</p>
    <p>Ashwin Kumar</p>
    <p>Brigade Group</p>
    <p>Contact</p>
    <p>[email protected]</p>
    <p>+91 8965238745</p>
    <p>City</p>
    <p>Bangalore</p>
    <p>Lorem ipsum dolor sit amet, no sea altera primis blandit, id nam cibo labitur. In iuvaret bonorum argumentum eum
    </p>
    <p></p>
  </div>
</div>

How to control the width of the divs so that they apply full width of the device in mobile view

Upvotes: 1

Views: 1110

Answers (2)

Hash
Hash

Reputation: 8020

Your CSS code is completely off if you have posted full code, you haven't used any list items. Those styles would be only applied to list items. That being said I think you have posted half of the code so anyways;

I have done some edits see this code. When resized each one stacks on top.

body {
  font-family: sans-serif;
  font-size: .9rem;
  background-color: #343434;
}

p {
  color: white;
}

a:hover:not(.active) {
  background-color: #111;
}

a:hover {
  text-decoration: underline;
  background: #525252;
  color: #F98900;
}

h1 {
  text-align: center;
}


/* 1 column: 320px */

.autowide {
  margin: 0 auto;
  width: 98%;
}

.autowide img {
  float: left;
  margin: 0 .75rem 0 0;
}

.autowide .module {
  background-color: #4c4b4b;
  border-radius: .25rem;
  margin-bottom: 1rem;
}

.autowide .module p {
  padding: .25rem .75rem;
}


/* 2 columns: 600px */

@media only screen and (min-width: 600px) {
  .autowide .module {
    float: left;
    margin-right: 2.564102564102564%;
    width: 48.717948717948715%;
  }
  .autowide .module:nth-child(2n+0) {
    margin-right: 0;
  }
}


/* 3 columns: 768px */

@media only screen and (min-width: 768px) {
  .autowide .module {
    width: 31.623931623931625%;
  }
  .autowide .module:nth-child(2n+0) {
    margin-right: 2.564102564102564%;
  }
  .autowide .module:nth-child(3n+0) {
    margin-right: 0;
  }
}


/* 4 columns: 992px and up */

@media only screen and (min-width: 992px) {
  .autowide .module {
    width: 23.076923076923077%;
  }
  .autowide .module:nth-child(3n+0) {
    margin-right: 2.564102564102564%;
  }
  .autowide .module:nth-child(4n+0) {
    margin-right: 0;
  }
}
<div class="autowide">
  <div class="module">
    <p>Follow Up 05:30pm</p>
    <p>Ashwin Kumar</p>
    <p>Brigade Group</p>
    <p>Contact</p>
    <p><a>[email protected]</a></p>
    <p>+91 8965238745</p>
    <p>City</p>
    <p>Bangalore</p>
    <p>Lorem ipsum dolor sit amet, no sea altera primis blandit, id nam cibo labitur. In iuvaret bonorum argumentum eum
    </p>
  </div>
  <div class="module">
    <p>Follow Up 05:30pm</p>
    <p>Ashwin Kumar</p>
    <p>Brigade Group</p>
    <p>Contact</p>
    <p><a>[email protected]</a></p>
    <p>+91 8965238745</p>
    <p>City</p>
    <p>Bangalore</p>
    <p>Lorem ipsum dolor sit amet, no sea altera primis blandit, id nam cibo labitur. In iuvaret bonorum argumentum eum
    </p>
  </div>
  <div class="module">
    <p>Follow Up 05:30pm</p>
    <p>Ashwin Kumar</p>
    <p>Brigade Group</p>
    <p>Contact</p>
    <p><a>[email protected]</a></p>
    <p>+91 8965238745</p>
    <p>City</p>
    <p>Bangalore</p>
    <p>Lorem ipsum dolor sit amet, no sea altera primis blandit, id nam cibo labitur. In iuvaret bonorum argumentum eum
    </p>
  </div>
  <div class="module">
    <p>Follow Up 05:30pm</p>
    <p>Ashwin Kumar</p>
    <p>Brigade Group</p>
    <p>Contact</p>
    <p><a>[email protected]</a></p>
    <p>+91 8965238745</p>
    <p>City</p>
    <p>Bangalore</p>
    <p>Lorem ipsum dolor sit amet, no sea altera primis blandit, id nam cibo labitur. In iuvaret bonorum argumentum eum
    </p>
  </div>
  <div class="module">
    <p>Follow Up 05:30pm</p>
    <p>Ashwin Kumar</p>
    <p>Brigade Group</p>
    <p>Contact</p>
    <p><a>[email protected]</a></p>
    <p>+91 8965238745</p>
    <p>City</p>
    <p>Bangalore</p>
    <p>Lorem ipsum dolor sit amet, no sea altera primis blandit, id nam cibo labitur. In iuvaret bonorum argumentum eum
    </p>
  </div>
</div>

Upvotes: 1

Gerard
Gerard

Reputation: 15786

I have simplified the CSS and using a flexbox. Inside the media query, the width is redefined to make it 100%.

.container {
  display: flex;
  justify-content: space-between;
}

.dailystatus {
  color: #ABABA7;
  background-color: #343434;
}

.width {
  width: 15%;
}

@media screen and (max-width: 500px) {
  .width {
    width: 100%;
  }
}
<p> Your task view all</p>
<div class="container">
  <div class="width dailystatus">
    <p>Follow Up 05:30pm</p>
    <p>Ashwin Kumar</p>
    <p>Brigade Group</p>
    <p>Contact</p>
    <p>[email protected]</p>
    <p>+91 8965238745</p>
    <p>City</p>
    <p>Bangalore</p>
    <p>Lorem ipsum dolor sit amet, no sea altera primis blandit, id nam cibo labitur. In iuvaret bonorum argumentum eum
    </p>
    <p></p>
  </div>
  <div class="width dailystatus">
    <p>Follow Up 05:30pm</p>
    <p>Ashwin Kumar</p>
    <p>Brigade Group</p>
    <p>Contact</p>
    <p>[email protected]</p>
    <p>+91 8965238745</p>
    <p>City</p>
    <p>Bangalore</p>
    <p>Lorem ipsum dolor sit amet, no sea altera primis blandit, id nam cibo labitur. In iuvaret bonorum argumentum eum
    </p>
    <p></p>
  </div>
  <div class="width dailystatus">
    <p>Follow Up 05:30pm</p>
    <p>Ashwin Kumar</p>
    <p>Brigade Group</p>
    <p>Contact</p>
    <p>[email protected]</p>
    <p>+91 8965238745</p>
    <p>City</p>
    <p>Bangalore</p>
    <p>Lorem ipsum dolor sit amet, no sea altera primis blandit, id nam cibo labitur. In iuvaret bonorum argumentum eum
    </p>
    <p></p>
  </div>
  <div class="width dailystatus">
    <p>Follow Up 05:30pm</p>
    <p>Ashwin Kumar</p>
    <p>Brigade Group</p>
    <p>Contact</p>
    <p>[email protected]</p>
    <p>+91 8965238745</p>
    <p>City</p>
    <p>Bangalore</p>
    <p>Lorem ipsum dolor sit amet, no sea altera primis blandit, id nam cibo labitur. In iuvaret bonorum argumentum eum
    </p>
    <p></p>
  </div>
  <div class="width dailystatus">
    <p>Follow Up 05:30pm</p>
    <p>Ashwin Kumar</p>
    <p>Brigade Group</p>
    <p>Contact</p>
    <p>[email protected]</p>
    <p>+91 8965238745</p>
    <p>City</p>
    <p>Bangalore</p>
    <p>Lorem ipsum dolor sit amet, no sea altera primis blandit, id nam cibo labitur. In iuvaret bonorum argumentum eum
    </p>
    <p></p>
  </div>
</div>

Upvotes: 0

Related Questions