Tips for creating responsive divs inside a parent div

Question

Tips for creating responsive divs inside a parent div

Even though I have read numerous similar questions on the topic, I am still struggling to understand how to position divs or other elements based on different media.

Here's my issue: I have a div containing 4 social bar pictures that I want to make responsive across all devices, especially mobile.

If anyone is willing to guide me through the process step by step, I would greatly appreciate it.

My current code looks like this:

HTML

<div class="col-sm-5" id="social-bar">
    <div class="pic1"></div>
    <div class="pic2"></div>
    <div class="pic3"></div>
    <div class="pic4"></div>
</div>

CSS

#social-bar
{
float:left;
display: inline-flex;
margin-top: 60px;
}
.pic1
{
background: url('../image/facebook.png') no-repeat;
width:29px;
height:27px;
margin-left: 180px;
}
.pic2
{
background: url('../image/twitter.png') no-repeat;
width:29px;
height:27px;
margin-left: 20px;
}
.pic3
{
background: url('../image/instagram.png') no-repeat;
width:29px;
height:27px;
margin-left: 20px;
}
.pic4
{
background: url('../image/gmail.png') no-repeat;
width:29px;
height:27px;
margin-left: 20px;
}

I have attempted the following so far, but it's not working as expected

@media screen and (max-width: 350px){
.pic1{
    background: url('../image/facebook.png');
}
}
@media screen and (max-width: 350px){
.pic2{
    background: url('../image/twitter.png');
}
}
@media screen and (max-width: 350px){
.pic3{
    background: url('../image/instagram.png');
}
}
@media screen and (max-width: 350px){
.pic4{
    background: url('../image/gmail.png');
}
}

This is the current positioning of the social bar

https://i.sstatic.net/yB1X4.jpg Any suggestions or feedback would be highly appreciated. Thank you!

html css responsive-design

Answer 1

Answer №1

Learn more about media queries and the concept of responsive web design here and here

View this JSFiddle demo

<div class="abc">
<div class="bcd">
    <a href="#">
    <img class="img1" width="50" height="50"/>
    </a>
    <a><h3>Some Content</h3></a> 
</div>
<div class="bcd">
    <a href="#">
    <img class="img1" width="50" height="50"/>
    </a>
    <a><h3>Some Content</h3></a> 
</div>
<div class="bcd">
    <a href="#">
    <img class="img1" width="50" height="50"/>
    </a>
    <a><h3>Some Content</h3></a> 
</div>
<div class="abcd">
    <a href="#">
    <img class="img1" width="50" height="50"/>
    </a>
    <a><h3>More Content</h3></a> 
</div>   
</div>


<style>
.abc{padding:0; margin:0; box-sizing:border-box; width:100%;}
.bcd{display:inline-block;width:24%;}
@media all and (max-width: 360px){
    .bcd
    {
        display:inline-block;
        width:49%;
    }
}
</style>

Answer 2

Learn more about media queries and the concept of responsive web design here and here

View this JSFiddle demo

<div class="abc">
<div class="bcd">
    <a href="#">
    <img class="img1" width="50" height="50"/>
    </a>
    <a><h3>Some Content</h3></a> 
</div>
<div class="bcd">
    <a href="#">
    <img class="img1" width="50" height="50"/>
    </a>
    <a><h3>Some Content</h3></a> 
</div>
<div class="bcd">
    <a href="#">
    <img class="img1" width="50" height="50"/>
    </a>
    <a><h3>Some Content</h3></a> 
</div>
<div class="abcd">
    <a href="#">
    <img class="img1" width="50" height="50"/>
    </a>
    <a><h3>More Content</h3></a> 
</div>   
</div>


<style>
.abc{padding:0; margin:0; box-sizing:border-box; width:100%;}
.bcd{display:inline-block;width:24%;}
@media all and (max-width: 360px){
    .bcd
    {
        display:inline-block;
        width:49%;
    }
}
</style>

Answer 3

Answer №2

Check out this example demonstrating how it can be done.

There are 2 media queries that activate when the screen is less than 660px and 440px wide.

Note the order of these queries in the CSS. The rules for 660px come before the rules for 440px, and they remain valid even when the 440px rules take effect. This means that any changes made in the 660px query need to be adjusted again for the 440px query if they should be different.

Feel free to use this fiddle to experiment with different settings, resize the window, and see the results.

Additional information:

If you're not familiar with using fiddle, you can resize the inner windows by dragging their borders, making it easy to test how the page responds. Simply click on "Run" and/or "Update" in the upper left corner to reload or save the latest code modifications.

html, body {
  margin: 0
}

.header {
  min-width: 380px;
  padding: 10px;
  border-bottom: 1px solid #999;
}

.container {
  padding: 10px;
  white-space: nowrap;
}

.header .col {
  display: inline-block;
  width: 33%;
}
.header .col:nth-child(2) {
  text-align: center
}
.header .col:nth-child(3) {
  text-align: right
}

.header .col:nth-child(1) img {
  width: 100%;
  height: 30px;
}

.container .row {
  margin-bottom: 10px;
}

.container .row span {
  margin-left: 10px;
  vertical-align: top;
}


@media (max-width: 660px){

  .header .col:nth-child(1) {
    display: block;
    width: auto;
  }

  .header .col:nth-child(2) {
    text-align: left;
    width: 50%;
  }

  .header .col:nth-child(3) {
    width: 50%;
  }

  .header .col:nth-child(2) img {
    width: 20%;
    height: 30px;
  }

}



@media (max-width: 440px){

  .header .col:nth-child(1),
  .header .col:nth-child(2),
  .header .col:nth-child(3) {
    display: block;
    width: auto;
    text-align: left
  }

  .header .col:nth-child(2) img {
    width: 24%;
  }

  .container .row span {
    display: block;
    margin-left: 0;
    margin-top: 10px;
  }
  
}

<div class="header">
  <div class="col">
    <img src="http://placehold.it/100x30/?text=logo" />    
  </div><div class="col">
    <img src="http://placehold.it/30x30" />    
    <img src="http://placehold.it/30x30" />    
    <img src="http://placehold.it/30x30" />    
    <img src="http://placehold.it/30x30" />    
  </div><div class="col">
    <img src="http://placehold.it/60x30/?text=cart butt" />    
  </div>
</div>


<div class="container">
  <div class="row">
    <img src="http://lorempixel.com/150/100/sports" />
    <span> Some text ... being aligned at the top</span>
  </div>
  <div class="row">
    <img src="http://lorempixel.com/150/100/city" />
    <span> Some text ... being aligned at the top</span>
  </div>
</div>

Answer 4

Check out this example demonstrating how it can be done.

There are 2 media queries that activate when the screen is less than 660px and 440px wide.

Note the order of these queries in the CSS. The rules for 660px come before the rules for 440px, and they remain valid even when the 440px rules take effect. This means that any changes made in the 660px query need to be adjusted again for the 440px query if they should be different.

Feel free to use this fiddle to experiment with different settings, resize the window, and see the results.

Additional information:

If you're not familiar with using fiddle, you can resize the inner windows by dragging their borders, making it easy to test how the page responds. Simply click on "Run" and/or "Update" in the upper left corner to reload or save the latest code modifications.

html, body {
  margin: 0
}

.header {
  min-width: 380px;
  padding: 10px;
  border-bottom: 1px solid #999;
}

.container {
  padding: 10px;
  white-space: nowrap;
}

.header .col {
  display: inline-block;
  width: 33%;
}
.header .col:nth-child(2) {
  text-align: center
}
.header .col:nth-child(3) {
  text-align: right
}

.header .col:nth-child(1) img {
  width: 100%;
  height: 30px;
}

.container .row {
  margin-bottom: 10px;
}

.container .row span {
  margin-left: 10px;
  vertical-align: top;
}


@media (max-width: 660px){

  .header .col:nth-child(1) {
    display: block;
    width: auto;
  }

  .header .col:nth-child(2) {
    text-align: left;
    width: 50%;
  }

  .header .col:nth-child(3) {
    width: 50%;
  }

  .header .col:nth-child(2) img {
    width: 20%;
    height: 30px;
  }

}



@media (max-width: 440px){

  .header .col:nth-child(1),
  .header .col:nth-child(2),
  .header .col:nth-child(3) {
    display: block;
    width: auto;
    text-align: left
  }

  .header .col:nth-child(2) img {
    width: 24%;
  }

  .container .row span {
    display: block;
    margin-left: 0;
    margin-top: 10px;
  }
  
}

<div class="header">
  <div class="col">
    <img src="http://placehold.it/100x30/?text=logo" />    
  </div><div class="col">
    <img src="http://placehold.it/30x30" />    
    <img src="http://placehold.it/30x30" />    
    <img src="http://placehold.it/30x30" />    
    <img src="http://placehold.it/30x30" />    
  </div><div class="col">
    <img src="http://placehold.it/60x30/?text=cart butt" />    
  </div>
</div>


<div class="container">
  <div class="row">
    <img src="http://lorempixel.com/150/100/sports" />
    <span> Some text ... being aligned at the top</span>
  </div>
  <div class="row">
    <img src="http://lorempixel.com/150/100/city" />
    <span> Some text ... being aligned at the top</span>
  </div>
</div>

Answer 5

Answer №3

One way to achieve this without the need for media queries is by using simple CSS. Take a look at the following code snippet:

HTML Code

<div class="col-sm-5">
<div class="social-icons">
<a href="" target="new" title="facebook"><img src="http://icons.iconarchive.com/icons/yootheme/social-bookmark/48/social-facebook-box-blue-icon.png" alt="facebook" /></a>
<a href="" target="new" title="twitter"><img src="http://icons.iconarchive.com/icons/yootheme/social-bookmark/48/social-twitter-box-blue-icon.png" alt="twitter" /></a>
<a href="" target="new" title="instagram"><img src="http://icons.iconarchive.com/icons/uiconstock/socialmedia/48/Instagram-icon.png" alt="instagram" /></a>
<a href="" target="new" title="gmail" class="last"><img src="http://icons.iconarchive.com/icons/cornmanthe3rd/plex/48/Communication-gmail-icon.png" alt="gmail" /></a>
<div class="clr"></div>
</div>
</div>

CSS

.social-icons a {
float: left;
margin: 0 5px 0 0;
}
.social-icons a img {
width: 29px;
height: 27px;
}
.clr {
clear: both;
}
.last {
margin-right: 0px !important;
}

Answer 6

One way to achieve this without the need for media queries is by using simple CSS. Take a look at the following code snippet:

HTML Code

<div class="col-sm-5">
<div class="social-icons">
<a href="" target="new" title="facebook"><img src="http://icons.iconarchive.com/icons/yootheme/social-bookmark/48/social-facebook-box-blue-icon.png" alt="facebook" /></a>
<a href="" target="new" title="twitter"><img src="http://icons.iconarchive.com/icons/yootheme/social-bookmark/48/social-twitter-box-blue-icon.png" alt="twitter" /></a>
<a href="" target="new" title="instagram"><img src="http://icons.iconarchive.com/icons/uiconstock/socialmedia/48/Instagram-icon.png" alt="instagram" /></a>
<a href="" target="new" title="gmail" class="last"><img src="http://icons.iconarchive.com/icons/cornmanthe3rd/plex/48/Communication-gmail-icon.png" alt="gmail" /></a>
<div class="clr"></div>
</div>
</div>

CSS

.social-icons a {
float: left;
margin: 0 5px 0 0;
}
.social-icons a img {
width: 29px;
height: 27px;
}
.clr {
clear: both;
}
.last {
margin-right: 0px !important;
}

Tips for creating responsive divs inside a parent div

Answer №1

Answer №2

Answer №3

Similar questions

Navigating the HTML Input Pattern: Your Comprehensive Resource

Largest possible <main> container with footer positioned at the bottom

I'm looking for a solution to resolve a parseerror for AJAX Error code 200

What is the best way to place multiple images on top of one another within a single div, and make them break apart with animation upon hovering?

Display the scrollbar in a Boostrap CSS table when the content exceeds the height of the div

What steps can be taken to update the ID's of <tr> and <td> elements within a table after deleting a row?

The download attribute in HTML5 seems to be malfunctioning when used within a React environment

The width of the column is not the same

Text aligned at the center of the Y and X axis

Design the title attribute for the style area tag

Displaying the division of shares in an HTML table using jQuery to add a new row

A Beginner's Guide to HTML: Finding the Optimal Viewport Dimensions

Steps to make a sliding tab

Conceal datalist choices when the input field is empty

Stop the Nav bar item from collapsing

The z-index of two elements seems to be behaving differently than anticipated

Obtaining the source code from a different domain website with the help of jQuery

The issue with the jQuery library arises when attempting to duplicate or insert a new row

Tips for eliminating the default margin without using a float

The applet failed to load on the HTML webpage