CODEWITHSUNDEEP
htmlcssmedia-queries
Danielle Markley
Danielle Markley

Reputation: 11

Mobile Responsive Divs

I have created 3 divs that line side-by-side on 1 row on desktop view but I would like each div to stack vertically on mobile devices only. I can't seem to figure out the correct CSS code/media query for this.

This is the HTML div code I'm using in the body of the post:

  <div style="float: left; width: 30%; margin-right: 5px;">
    SOURCE 1
    <div style="float: left; width: 30%; margin-right: 5px;">
    SOURCE 2
    <div style="float: left; width: 30%; margin-right: 5px;">
    SOURCE 3

Here is the full HTML code--I am embedding 3 Instagram photos.

   div style="float: left; width: 30%; margin-right: 3px;">

    blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="6">

    div style="padding: 1px;">

    div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;"></div>

    a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BC2kmbmhTOY/" target="_blank">#CherryBlossom #Doughnuts: Vanilla Cream Cheese Glaze w/ a #Cherry Filling, and featuring a #CherryBlossomTree design made with Chocolate (tree) and Cherry Buttercream Flowers Available Soon! March 15 to April 17.</a>

    A photo posted by Astro Doughnuts (@astrodoughnuts) on <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-03-12T12:17:51+00:00">Mar 12, 2016 at 4:17am PST</time>

    /div></blockquote>

    script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer">

    /script>

    /div>

    div style="float: left; width: 30%; margin-right: 3px;">

    blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="6">

    div style="padding: 1px;">

    div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;"></div>

    a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BCq4otrp-ZW/" target="_blank">Spring truly arrives when flowers start blooming, and our #CherryBlossom macaron has certainly begun showing its petals! Sweet and subtle, it's the perfect spring bite. #oliviamacaron #frenchmacarons #springtime #GeorgetownDC #ShopTysons #DCeats</a>

A photo posted by Olivia Macaron (@oliviamacaron) on <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-03-07T23:22:02+00:00">Mar 7, 2016 at 3:22pm PST</time>

/div>

/blockquote>

script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer">

/script>

/div>

div style="float: left; width: 30%; margin-left: 3x;">

blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="6">

div style="padding: 1px;">

div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;"></div>

a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BDJCBpnAi8f/" target="_blank">🌸💕 Happy Saturday! 💕🌸</a>

A photo posted by Georgetown Cupcake (@georgetowncupcake) on <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-03-19T16:21:18+00:00">Mar 19, 2016 at 9:21am PDT</time>

/div>

/blockquote>

script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer">

/script>

/div>

div style="clear: both; height: 1em;"></div>

Upvotes: 1

Views: 7135

Answers (5)

DESHRAJ
DESHRAJ

Reputation: 104

.block{     text-align: center; width:30%; margin:0px; padding:50px 0; float:left;}


@media only screen and (max-width: 767px) {
.block{ width:100%;}
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="block" style="    background: #f00;">
SOURCE 1
</div>
<div class="block" style="    background: #ccc;">
SOURCE 2
</div>
<div class="block" style="    background: #444;">
SOURCE 3
</div>

Please check hope so this will help full for you

Upvotes: 1

Killick
Killick

Reputation: 288

There is different options to do that, but both use media queries.

You can either put each div on display: inline-block on desktop and change them to display: block on mobile. Maybe set a width: 33% for each div (otherwise if your div are too long they won't be side by side).

Or the other solution: Put your parent element on display: flex on desktop and put it back on display: block on mobile.

.sub { background-color: rgba(200,200,200,0.6); box-sizing: border-box; border-right: 1px solid black; padding: 5px; }

.first { display: flex; }
.first .sub { width: 33.3%; }

.second { display: block; margin-top: 20px; }
.second .sub { width: 100%; }

/* media queries for mobile */
@media (min-width: 320px) and (max-width: 480px) {
  .first { display: block; }
  .first .sub { width: 100%; }
}
<div class="first">
  <div class="sub">One</div>
  <div class="sub">Two</div>
  <div class="sub">Three</div>
</div>


<div class="second">
  <div class="sub">One</div>
  <div class="sub">Two</div>
  <div class="sub">Three</div>
</div>

Upvotes: 0

Taras Kumpanenko
Taras Kumpanenko

Reputation: 96

See example. You should use percentage dimensions

.col{
  height: 100px;
  background-color: red;
  margin-bottom: 10px;
}

@media (min-width: 960px){
  .col{
    float:left;
    width: 30%
    margin-left: 10%;
  }
  .col:last-child{
    margin-left: 0%;
  }
}
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>

Upvotes: 1

Ali Marrouny
Ali Marrouny

Reputation: 32

use <li> instead of <div>, then use display:inline-block; or display:block;

Upvotes: -1

partypete25
partypete25

Reputation: 4413

You need to use media queries in your css to produce responsive layouts. It can't be done using inline styles.

At a minimum, and from a mobile first approach:

<div>
SOURCE 1
</div>
<div>
SOURCE 2
</div>
<div>
SOURCE 3
</div>

<style>
    @media(min-width:768px){
        div {
            float:left;
            width:30%;
    margin-right:5px;
        }
    }
</style>

Here you have three stacked, full width divs. Once the browser or device is equal to or beyond the defined breakpoint of 768px, the new css takes effect to produce three side-by-side divs as defined in the css.

Upvotes: 3

Related Questions