2

This code below is responsive and resizes etc. But I'm looking for some real simple CSS to resize when on desktop and mobile.

I get that I can muck with the CSS from the header link w3.css, but there has to be a better way to just easily display some things on desktop vs mobile.

And mobile defaults to displaying inline, yet on desktop displays as 3 rows.

Is there an easier solution than the w3 school?

Just trying to do a couple rows, that then resize to single on mobile...

Link rel goes in header:

       <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

      <div class="w3-row">

       <div class="w3-third w3-container w3-green" align=center>
         <h2>w3-third</h2>
         Stuff here too
       </div>

       <div class="w3-third w3-container w3-red">
        <h2>w3-third</h2>
       </div>

       <div class="w3-third w3-container w3-blue">
        <h2>w3-third</h2>
       </div>

     </div>

I've got to here below with help from Ahmed and Raven. But not centering. I also changed to 90% to allow for some spacing.

Works for the most part, but not centering on larger width. Does flip to single rows when smaller width, which is good. I'm looking for that mobile reponse like that. Easy code so far to, and I can easily manipulate.

CSS

       @media only screen and (min-width:320px) and (max-width: 600px) {

         .display {
            width: 90%;
            background: #f1f1f1;
            padding: 10px;
            border: solid 2px #998E67;
            margin: 5px;
                  }
        }

       @media only screen and (min-width:600px) {
           .display {
               float: left;
               width: 30%;
               background: #f1f1f1;
               padding: 10px;
               border: solid 2px #998E67;
               margin: 5px;
                }
        }

Not sure if I need this outside div align center, doesn't seem to work.

          <div align=center style="border: 1px solid ##000">

          <div class="display" align=center>
            <img src="../../images/img.png" height="55" border="0">
            <h2>This is first</h2>
          </div>

          <div class="display"">
            <h2>This is second</h2>
          </div>

          <div class="display">
            <h2>This is Third</h2>
            <img src="../../images/image" height="55" border="0">
          </div>

         </div>
Merle_the_Pearl
  • 1,391
  • 3
  • 18
  • 25

2 Answers2

2

You can use media query. Then you can handle the style for every pixel

@media only screen and (min-width: 320px) and (max-width: 575px) {
//Use  your styling here
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
//Use  your styling here
}
Alauddin Ahmed
  • 1,128
  • 2
  • 14
  • 34
  • 1
    Media queries are definitely the way to go here, you can do phone, tablet, and desktop (or any other size that you define) – dlkulp Mar 22 '18 at 04:07
1

You can use media queries for that. Give each one of them around 33% width on desktop and around 100% width on mobile.

@media only screen and (min-width:320px) and (max-width: 600px) {
    .w3-third {
        width: 100%
    }
}

@media only screen and (min-width:600px) {
    .w3-third {
        float: left;
        width: 33.33%;
    }
}

That way, you can adjust the sizing of the columns easily using different media queries.

Btw, make sure to include clearfix on the parent (.w3-row in this case).

Edit: centering involves a little bit of math. i've created a fiddle for you with some explaination.

https://jsfiddle.net/zmvphaj0/4/

The way width is calculated is that you first count the number of times the empty space (or gutter) occurs (2 in our case), so if you were to take the full available width and subtract 2 times gutter, you'll have the remaining space that the columns should cover. So you divide the remaining space by 3 (note that the parentheses in that formula make it work). Now you give a margin-left to all but the first (or margin-right to all but last) column.

Same logic works for all other column widths in a 12 column grid layout.

Edit 2: Updated fiddle link with media queries.

Thx Rav... Working Fiddle: jsfiddle.net/w648ng81/36

Merle_the_Pearl
  • 1,391
  • 3
  • 18
  • 25
Suresh
  • 427
  • 2
  • 7
  • I guess what I am relating, is the css in a local file so I can manipulate. The w3 is a link pull and I can't manipulate it well. So looking for simple css. That i can drop into local css file and control. – Merle_the_Pearl Mar 22 '18 at 05:57
  • You can make your own CSS stylesheet and include this code.. and rename the classes if you want to. The above snippet works on its own (it's not depended on the W3 one). Lemme know if I didn't get it right and you're looking for something else. – Suresh Mar 22 '18 at 06:04
  • Floats left and on top of all other elements. Hmm. Need centerd and not on top of other div/section – Merle_the_Pearl Mar 22 '18 at 17:31
  • I've added a fiddle to center the content (this should be included for desktop only or where you want the 3 column layout). Hope that helps. Do mark the answer correct if it does. – Suresh Mar 23 '18 at 03:32
  • Not responsive to go to single columns when different screen size. Hmmm – Merle_the_Pearl Mar 23 '18 at 03:44
  • All you have to do is add the media queries now. Updated the fiddle link. Check it out. – Suresh Mar 23 '18 at 03:55
  • Exc thx. I tweaked some things for colors and width etc. But it seems to be doing what it should be doing. Thx – Merle_the_Pearl Mar 23 '18 at 17:48
  • Sorry... Shucks, when I remove the , I loose the formatting? I wanted to avoid the w3 link call. – Merle_the_Pearl Mar 23 '18 at 17:55
  • You need to adjust the class names as well. The fiddle link doesn't use w3 link call but still works, doesn't it? – Suresh Mar 23 '18 at 17:56
  • No. Changed stuff to icenter and icolumn1of3, and when I remove the link rel to w3. It all goes wonky. – Merle_the_Pearl Mar 23 '18 at 22:40
  • Make a fiddle to show that it doesn't work so I can take a look at it. – Suresh Mar 24 '18 at 02:00
  • Ya... Offsets without Link Rel. Even does it in Internet Explorer with the Link Rel, I have only been looking at through Firefox. I was gonna upload pic, don't have fiddle account – Merle_the_Pearl Mar 24 '18 at 04:23
  • You don't need a fiddle account. Just go to jsfiddle.net and paste your html and CSS in the appropriate boxes and hit run to see the result, then copy that link and send it here so I can take a look at it. – Suresh Mar 24 '18 at 04:25
  • Try this? https://jsfiddle.net/w648ng81/8/ - full code with html and css – Merle_the_Pearl Mar 24 '18 at 05:03
  • As soon as I put in this it works in Firefox – Merle_the_Pearl Mar 24 '18 at 05:04
  • Move the media query rule and the :first-child rule to the bottom of the CSS. Remove the padding from the columns. If you want to give padding, create another div within that column and give padding to that. Make sure your code doesn't have any errors (I had to remove some syntax errors from it).. And it'll work. Check this. https://jsfiddle.net/w648ng81/32/ – Suresh Mar 24 '18 at 05:47
  • Works in Firefox, but does not in IE. Hmmm – Merle_the_Pearl Mar 24 '18 at 14:13
  • Could be because of the calc function. Try setting a width in percentages and it should work. Like this. https://jsfiddle.net/w648ng81/36/ – Suresh Mar 24 '18 at 15:04
  • Exc, works thx for all your time. I was able to set to 750 width too, for tablet usage too. It's doing what it suppose to. works in IE too thx. jsfiddle.net/w648ng81/36 – Merle_the_Pearl Mar 24 '18 at 16:06