Okay, I've got it resizing nicely for devices using a media query. Now I need to reproduce this on a browser resize. Is it possible using only CSS? I'm trying to avoid multiple named divs for scalability (i.e. add another change the min-width etc and it'll still work)
Yes, this may well have been asked before (I really have hunted), but there's just so many ways of framing the question...please indulge me .
The media query with viewport turns the divs into columns of a specific size.
But how on earth do I do this during a browser resize?
If you view this result on device via Chrome inspect etc my point will be abundantly clear.
Thanks all!
#Page {
margin: 0 auto 20px;
width: 98%;
/*1000px*/
background-color: lightgray;
}
#content {
margin: 0 auto 10%;
width: 96%;
background-color: green;
max-width: 1100px;
}
.col_content {
float: left;
margin: auto 1%;
width: 30%;
background-color: pink;
min-width: 225px;
}
#media only screen and (max-device-width: 768px) {
#Page {
background-color: white;
}
#content {
max-width: 400px;
background-color: green;
}
.col_content {
float: none;
margin: 1%;
/*5px*/
width: 100%;
background-color: pink;
}
}
<div id="content">
<!--Content-->
<div class="col_content">
1
</div>
<!--end col_content-->
<div class="col_content">
2
</div>
<!--end col_content-->
<div class="col_content">
3
</div>
<!--end col_content-->
</div>
<!--end content-->
Try changing:
#media only screen and (max-device-width: 768px) {
to
#media screen and (max-width: 768px) {
I use the above on my website and it works on browser resizes and on devices.
Related
This question already has answers here:
Left column and stacked right column using flexbox CSS [duplicate]
(2 answers)
Closed 2 years ago.
For the mobile version I want the title to be on top -> then the carousel -> then the form. For the desktop version I want the carousel to be on the left half of the screen and the title and form to be on the right side of the screen and stacked.
#top {
width: 50%;
background-color: red;
height: 10vh;
float: right;
}
#middle {
width: 50%;
background-color: green;
height: 30vh;
float: left;
}
#bottom {
width: 50%;
float: right;
vertical-align: top;
background-color: blue;
height: 15vh;
vertical-align: top;
}
html,
body {
margin: 0;
padding: 0;
}
#media only screen and (max-width: 375px) {
#top,
#middle,
#bottom {
width: 100%;
}
/* STYLES GO HERE */
}
<div id='container'>
<div id='top'></div>
<div id='middle'></div>
<div id='bottom'></div>
</div>
A easy way, but not really a recommended way, is to put all your elements in a grid. Here is some more information about grid for css: https://css-tricks.com/snippets/css/complete-guide-grid/
An other way with more customization opportunities is by making duplicate versions of your HTML, and changing the layout on one of the versions to match your mobile layout. And by giving both of the versions different classes you can realy easely change what layout is visible at what time.
For axample:
<body>
<div class='desktop'>
//desktop layout
</div>
<div class='mobile'>
//mobile layout
</div>
</body>
<style>
.mobile {
display: none;
}
.desktop {
display: block;
}
#media only screen and (max-width: 900px) {
.mobile {
display: block;
}
.desktop {
display: none;
}
</style>
I'm new to media queries, and I've watched a few tutorials on the best practices, but it seems i can't get mine to work..
I created a simple text div to make sure it even works, and I'm trying to have the background-color of the div change to blue once the width of the browser is smaller than 500px.
Does anybody know what I'm missing?
#text_box {
height: 100px;
width: 100px;
background-color: red;
}
#media screen and (max-width: 500px) {
#test_box {
height: 100px;
width: 100px;
background-color: blue;
}
}
<div id="text_box">Test</div>
Here is my demo
you have a typo inside your media query in your id,it is not test_box, but text_box.
plus you don't need to repeat properties already set before, if they have the same value.
#text_box {
height: 100px;
width: 100px;
background-color: red;
}
#media screen and (max-width: 500px) {
#text_box {
background-color: blue;
}
}
<div id="text_box">Test</div>
My classmates and I are trying to figure how to make this code be completely mobile friendly. We tried using #media screen but it did not work. We want to make this happen with HTML and CSS.
HTML
<!--List Content Start-->
<div class="listcontent">
<div class="listnumber">1</div>
<div class="listtitle">This div tag emphasizes the title.</div>
<div class="listpic"></div>
</div>
<br><br>
<!-- List Content End-->
<div class="listcontent">
<div class="listnumber">2</div>
<div class="listtitle">This div tag emphasizes the title.</div>
<div class="listpic"></div>
</div>
</div>
CSS
.listcontainer {
width: 100%;
height: 100%;
}
.listcontent {
width: 500px;
height: 400px;
margin: auto;
background-color: #F5EFEF;
padding:5px;
}
.listnumber {
width: 50px;
height: 50px;
float: left;
background-color: #B33638;
padding: 5px;
color: white;
font-size: 45px;
text-align: center;
}
.listtitle {
width: 425px;
height: 50px;
padding: 5px;
float: right;
background-color: #fff;
}
.listpic {
width: 100%;
height: 335px;
margin-top: 65px;
}
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Here is the fix I created for you in terms of your coding snippet: JSFiddle
.listcontainer {
width: 100%;
height: 100%;
}
.listcontent:first-child {
margin-bottom: 40px;
}
.listcontent {
max-width: 500px;
min-width: 320px;
width: 100%;
height: 400px;
margin: auto;
background-color: #F5EFEF;
padding: 0;
}
.titlewrapper {
width: 100%;
}
.listnumber, .listtitle {
display: inline-block;
}
.listnumber {
width: 50px;
height: 50px;
background-color: #B33638;
padding: 5px;
color: white;
font-size: 45px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
float: left;
}
.listtitle {
height: 50px;
line-height: 50px;
padding: 5px;
background-color: #fff;
white-space: nowrap;
width: calc(100% - 70px);
max-width: 100%;
}
.listpic {
width: 100%;
height: 335px;
margin-top: 65px;
}
<div>
<!--List Content Start-->
<div class="listcontent">
<div class="titlewrapper">
<div class="listnumber">1</div>
<div class="listtitle">
This div tag emphasizes the title.
</div>
</div>
<div style="clear:both;" />
<div class="listpic"></div>
</div>
<!-- List Content End-->
<div class="listcontent">
<div class="titlewrapper">
<div class="listnumber">2</div>
<div class="listtitle">
This div tag emphasizes the title.
</div>
</div>
<div style="clear:both;" />
<div class="listpic"></div>
</div>
</div>
Ok so let's dive in, what are the reason for all these CSS and HTML changes?
To make something mobile responsive you need to consider the behavior it needs to have. When it comes to element widths, a general rule of thumb is the following.
CSS code example:
.some-wrapper-element {
width: 100%;
min-width: 320px;
max-width: 100%;
}
This makes a wrapping element, such as your .listcontent to become responsive with and without media queries being used. Note how I applied this throughout the CSS to give elements which needed to resize as the page resized, a dynamic width.
Your HTML layout needed a little more thought behind it. You are trying to horizontally align two elements and make them responsive. I will admit this is not a straight forward and easy to implement solution, but there are standard things to look at:
A wrapping element to ensure horizontal alignment occurs.
A CSS rule to keep the elements in line, such as display: inline-block or float: left, or a combination... the implementation depends on what works for you.
The elements to be horizontally aligned and made responsive, need to fit next to each other. This is important and it is the reason for all the added CSS code. See a very good reference here: How to place two divs side by side where one sized to fit and other takes up remaining space?
Media queries..., my rule of thumb is: does x element need to change responsively in a way which cannot be done with CSS styling first? Such as hiding/showing an image on certain screen widths, then your answer is yes please. Otherwise think of our layout first, how to make it responsive first and last how to use media queries for the things you cannot make responsive.
The <div style="clear:both;" /> code that was put there. That exists only to help separate your title section from your image section. It is another layout sugar I put there for you, because it will help keep things in place and separate content that does not need to be mixed. Awesome right!
line-height: 55px; This is simple: if you have text inside a small element (like the one you have) and you want it to look well, center it using line-height that is equal to the element's height. I did this just because I thought it looks nice, but change it if you think it is unnecessary.
Anyways, I hope this helps let me know if you have any questions.
The listcontainer should have the fixed width, while the listcontent fill them by 100%. All you have to do then is just fill the media querys like this:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 1024px) {
.listcontainer {
width: 100%;
height: 100%;
}
}
This way the site will have a fixed width for desktop usage, once the browser is too small to display the entire page (in this case 1024px but that depends on the page - in your example probably 500px) it will go to 100% dynamically, which is the most common approach. I can't tell you all of the media querys, since it depends on the developer to decide what the bevahiour should look like.
If you want to have a really mobile friendly site I recommend you using a framework like bootstrap - it does most of the job for you and you'll learn exactly how media querys are working and how you are supposed to use them properly.
While converting a page to responsive layout, css style resets after 620px breakpoint. The affected design part is as follows. Please note the following snippet working perfectly and given only to describe what I'm doing. The problem occurs only if it is combined with the full code.
.tfulltiny{
float: left;
width: 100%;
padding: 20px 0 20px 0;
}
.tblocktiny{
float: left;
text-align: left;
margin-top: 10px;
}
.tcelltiny{
float: left;
text-align: left;
color: #609;
font-weight: bold;
}
#media only screen and (min-width: 680px) {
body {
margin:0 40px 0 40px;
}
.tblocktiny{
width: 16%;
}
.tcelltiny {
width:100%;
}
}
#media only screen and (max-width: 680px) {
.tblocktiny{
width: 99%;
}
.tcelltiny {
width:100%;
}
}
<div class="tfulltiny">
<div class="tblocktiny">
<div class="tcelltiny">
<span>Planet</span>
</div>
</div>
<div class="tblocktiny">
<div class="tcelltiny">
<span>Longitude (Deg:Min:Sec)</span>
</div>
</div>
<div class="tblocktiny">
<div class="tcelltiny">
<span>Rasi</span>
</div>
</div>
<div class="tblocktiny">
<div class="tcelltiny">
<span>Longitude (Deg:Min:Sec)</span>
</div>
</div>
<div class="tblocktiny">
<div class="tcelltiny">
<span>Star</span>
</div>
</div>
<div class="tblocktiny">
<div class="tcelltiny">
<span>Pada</span>
</div>
</div>
</div>
Expected output after 680px screensize:
But suddenly the style disappears while crossing 620px+
The full code is so big so I cant include it here, may be the bug is in that code. However I want information on what makes styling disappear. What are the possible issues and how to resolve this?
Edit :
After searching, I found 620px width used 2 times in code. Don't know it have some role in this error.
#media only screen and (min-width: 620px) {
.tblocksml{
width: 49%;
}
.tcellsml {
width:99%;
}
}
#media only screen and (max-width: 620px) {
.tblocksml{
width: 99%;
}
.tcellsml {
width:99%;
}
}
Try this https://jsfiddle.net/2Lzo9vfc/118/
CSS
#media only screen and (max-width: 680px) {
.tblocktiny{
width: 99%;
margin-top: 0;
}
.tcelltiny {
width:100%;
color: black;
font-weight: normal;
}
}
Other solution https://jsfiddle.net/2Lzo9vfc/119/
#media only screen and (min-width: 680px) {
body {
margin:0 40px 0 40px;
}
.tblocktiny{
width: 16%;
margin-top: 10px;
}
.tcelltiny {
width:100%;
color: #609;
font-weight: bold;
}
}
Finally found a fix to this problem. Actually it is just a trick, not a proper solution. The problem occurring due to #media overlaps. So the part which faces problem must be added first place in the code. That is, cut-paste the misbehaving code in top of css and the problem will be solved. However I know this is not a proper method, but it works for me. I'll change this answer from best when better answer arrives.
I've been trying to write some simple media queries, but I was stuck right after I started. It seems like media queries only work on text and not on divs and images.
This is my css code along with the html.
#media (max-width: 720px) {
.logo {
margin-top: 30px;
margin-bottom: 20px;
width: 100%;
}
<!-- only this piece of query works --> .text {
border-bottom: 2px solid red;
}
.gif {
clear: right;
}
}
body {
background-image: url('website/resources/images/body.png')
}
.logo_container {
width: 700px;
height: auto;
margin-top: 60px;
margin-bottom: 40px;
}
#logo {
width: 100%;
height: auto;
}
.text {
font-size: 30px;
margin-bottom: 60px;
}
.gif {
float: right;
}
<center>
<div class="logo_container">
<img id="logo" src="logo.png"></img>
</div>
<div class="text">some text ...</div>
<div class="gif">
<img src="under_construction.gif"></img>
</div>
</center>
Acording to this code image should strech to 100% of the window width right after window size comes under 720px and gif which float to the left of the text should clear its float and go under the image. But nothing happens, except text gets a red border.
I've tried some different formats of media queries, #media () {}, #media screen () {}, #media only screen () {}, #media screen and () {}, #media only screen and () {} but none of these seem to work for images and divs.
Here is my whole code:
http://pastebin.com/0bvUrZnU
OK so your media queries are not great.
Firstly lets change media to : #media handheld,screen and (max-width: 720px)
This will allow your query to be read across the board by DPI changes resolution changes it will even work in things like iframes and pretender box's and emulators it all basically.
Now also as a rule of thumb your media queries should be at the bottom of your style sheet. We do this because style sheets are read from top to bottom so all overriding styles should go underneath original style rule's.
so you want this :
You were missing a . before text and also use float:none; when canceling a float.
I have also tidied up your html a little also with <img> tags always define the height and width withing the tag itself like so <img width="300" height="100" /> and then use css to override it. this is so the browser can render the image faster because it knows its proportion's & you should all ways have an alt attribute. finally images are not wrappers they do not need to end in </img> instead just finish it all off like this: <img width="300" height="100" alt="iam an image and if i wanted to be responsive i should have max-width:100%; height:auto; as my CSS rule." />
body {
background-image: url('website/resources/images/body.png')
}
.logo_container {
width: 700px;
height: auto;
margin-top: 60px;
margin-bottom: 40px;
}
#logo {
width: 100%;
height: auto;
}
.text {
font-size: 30px;
margin-bottom: 60px;
}
.gif {
float: right;
}
#media handheld,
screen and (max-width: 720px) {
#logo {
margin-top: 30px;
margin-bottom: 20px;
width: 100%;
}
.text {
border-bottom: 2px solid red;
}
.gif {
float:none;
}
}
<center>
<div class="logo_container">
<img id="logo" src="logo.png" alt="all images should have alts and use width and height" />
</div>
<div class="text">some text ...</div>
<div class="gif">
<img src="under_construction.gif" alt="all images should have alts and use width and height" />
</div>
</center>
on your desktop code you target logo as an id #logo and in your media query you target it as a class .logo
It works as expected but you have some problem in code inside your media query. You are referring it as class instead of id
#media (max-width: 720px) {
/*this is id but you just referred it with .logo which isn't present*/
#logo {
margin-top: 30px;
margin-bottom: 20px;
width: 100%;
}
/*only this piece of query works*/
.text {
border-bottom: 2px solid red;
}
.gif {
clear: right;
}
}
I had the same problem after css lint suggested to remove
* {
margin: 0;
padding: 0;
I replaced that and media queries worked again.
Most issues that I have come across with Media Queries not working as expected are due to the order they appear. Sometimes they can get out of order unexpectedly, especially when changing from min to max or vice versa.
When using max-width, check to make sure all queries appear largest to smallest width (1200px, then 992px, etc).
When using min-width, check to make sure all queries appear smallest width to largest (576px, then 768px etc).