I'm using these media queries in CSS to make my footer responsive.
I want to make the 3 columns (#footer-left, #footer-middle, #footer-right) automatically move under each other when the screen is made smaller.
what would be the best way of doing this? I have a fiddle here: jsfiddle
/* for 980px or less */
#media screen and (max-width: 980px) {
#footer-left {
width: 41%;
padding: 1% 4%;
}
#footer-middle {
width: 41%;
padding: 1% 4%;
margin: 0px 0px 5px 5px;
border-right:none;
}
#footer-right {
padding: 1% 4%;
}
#footer-bottom {
display:none;
}
}
/* for 800px or less */
#media screen and (max-width: 780px) {
#footer-left {
border-right:none;
}
#footer-middle {
margin-left: 0px;
border-right:none;
}
}
/* for 700px or less */
#media screen and (max-width: 700px) {
#footer-left {
border-right:none;
}
#footer-middle {
margin-left: 0px;
border-right:none;
}
}
/* for 480px or less */
#media screen and (max-width: 480px) {
#footer-right {
display: none;
}
}
Just make your #footer-left, #footer-middle, and #footer-right divs all be width:100% when you want them to stack, with float:none on each of them. Your width may need to be less than 100% if you keep padding on any of the divs (in your case, width would be 92%, since you've got it set up for 4% padding on left and right of each div).
Related
How can I increase the percentage of margins as the viewport width also increase? For example if the screen is 1600px wide, the margins are set to 1% and when the screen is 2100px and above the margins are 10%.
How do I set this in CSS?
Here is a working example of what you are looking for: https://codepen.io/colinah/pen/VwQombR
The Idea is to use a media query to tell if the device is larger than 1600px then set the margin to 10vw
body{
margin: 1vw
}
#media(min-width:1600px){
body {
margin: 10vw
}
}
.wrapper{
border: 1 px solid black;
background: blue;
}
.my-list {
border: 1 px solid;
}
.my-list {
background: red;
}
/* On screens that are 1600px wide or more, make margin 1%; */
#media screen and (max-width: 1600px) {
.my-list {
margin: 1%;
}
}
/* On screens that are 1600px wide or more, make margin 1%; */
#media screen and (min-width: 1600px) and (max-width: 1700px){
.my-list {
margin: 1%;
}
}
/* On screens that are 1700px wide or more, make margin 3%; */
#media screen and (min-width: 1700px) and (max-width: 1800px){
.my-list {
margin: 3%;
}
}
/* On screens that are 1800px wide or more, make margin 4%; */
#media screen and (min-width: 1800px) and (max-width: 1900px){
.my-list {
margin: 4%;
}
}
/* On screens that are 1900px wide or more, make margin 6%; */
#media screen and (min-width: 1900px) and (max-width: 2000px){
.my-list {
margin: 6%;
}
}
/* On screens that are 2000px wide or more, make margin 8%; */
#media screen and (min-width: 2000px) and (max-width: 2100px){
.my-list {
margin: 8%;
}
}
/* On screens that are 2100px wide or more, make margin:10%; */
#media screen and (min-width: 2100px) {
.my-list {
margin: 10%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="wrapper">
<div class="my-list">
test message
</div>
</div>
</body>
</html>
I'm fairly new to the world of scripts and coding, so I do not know the best terms to use.
I am trying to make a somewhat simple website, and I want my header background to have padding-bottom 120px at min-width 600px, and 0 at 1050. However, the padding-bottom only updates when changed in the properties for header.
Here is my code:
header {
border-radius: 5px;
display: block;
width: auto;
min-height: 200px;
background: #E44;
padding-top: 40px;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 136px;
}
#media screen and (min-width: 600px) {
.header {
padding-bottom:120px
}
}
#media screen and (min-width: 1050px) {
.header {
padding-bottom: 0px;
}
}
The padding-bottom stays at 136px no matter the min-width of the window.
Make sure that you know the difference the dot does. .header is selection the header class. While header selects the element. Your code works fine, as you can see here, I'm using the media queries to change the background color instead of padding, just to make the point clear.
Fiddle example
header {
border-radius: 5px;
display: block;
width: auto;
min-height: 200px;
background: #E44;
padding-top: 40px;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 136px;
}
#media screen and (min-width: 600px) {
.header {
background-color: blue;
}
}
#media screen and (min-width: 1050px) {
.header {
background-color: green;
}
}
<header class="header">
</header>
There is a small typo here. You have an additional dot(.) which will mean a class selector as against the other style which is on element selector.
#media screen and (min-width: 600px) {
header {
padding-bottom:120px
}
}
#media screen and (min-width: 1050px) {
header {
padding-bottom: 0px;
}
}
So I have an element that I want to change at 750px and 500px:
.footer-logo img {
content:url(...);
}
and then:
#media only screen and (max-width: 700px) {
.footer-logo img{
margin-top: -58px !important;
padding:64px;
}
}
#media only screen and (max-width: 500px) {
.footer-logo img {
width: 80vw !important;
max-width:none !important;
margin-top:-10px !important;
}
The 500px changes happen but the changes when testing at 700px do not happen. I know I shouldn't be using !important so much but the styling just won't happen without it... Any help is appreciated
You can Try This. please check div Color changes According to media query
HTML
<div class="footer-logo">
<img src="http://dummyimage.com/100x50/000/fff&text=Throbble!">
</div>
CSS
#media only screen and (max-width: 700px) {
.footer-logo > img{
margin-top: -58px !important;
padding:64px;
}
.footer-logo {
background-color:yellow;
}
}
#media only screen and (max-width: 500px) {
.footer-logo > img {
width: 80px !important;
max-width:none !important;
margin-top:-10px !important;
}
.footer-logo {
background-color:red;
}
}
I am learning the basics of responsive design, and started from scratch. I want a very simple page with no margin on the sides. Yet on an iphone, the site has still a fairly big white margin left and right. This is the CSS i have so far:
div#header_image img{
max-width:100%;
}
div#chart img{
max-width:100%;
}
div#Chart_place{
margin-bottom:2em;
}
#media screen and (min-width: 800px) {
div#container{
width:800px;
margin: 0 auto;
}
}
#media screen and (max-width: 800px) {
div#container{
width:max-width;
margin: 0;
padding: 0;
}
}
body{
font-family:Verdana, Geneva, sans-serif;
margin:0;
}
h1{
font-size: 1.5em;
margin-top:2em;
margin-bottom:2em;
}
ul{background-color:white;}
div#Feesboek_button{
}
input[type='text'], textarea {font-size:16px;}
What do I do wrong?
EDIT/UPDATE: Since my previous answer is not what you where looking for, use this:
html,body { margin:0; padding: 0; }
#container {
max-width: 800px;
padding: 0;
margin: 0 auto;
/*for ilustration purposes*/
background-color: #f13700;
}
#media (max-width: 800px) {
#container {
padding: 0;
margin: 0;
}
}
There you go, no margins on 800px or less.
See it here: http://jsfiddle.net/fCzT9/
Full screen: http://jsfiddle.net/fCzT9/embedded/result/
Previous answer:
In your CSS you have:
#media screen and (min-width: 800px) {
div#container{
width:800px;
margin: 0 auto;
}
This will be applied for every device with a screen that is at least 800px. You have declared the width with a fixed 800px and margin: 0 auto will center that container with 800px in the screen. Take into account that your device might have a high density screen (called Retina in iPhones).
The solution to your problem depends on how your layout is based, but try this:
#media screen and (min-width: 800px) {
div#container{
width: 100%;
max-width: 80em;
margin: 0 auto;
}
This way, the maximun width will be 80 times the base font-size, 16px, resulting in 1280px. As the width is declared with 100%, it will take the available width in the screen. If the screen is bigger than 1280px, it won't go beyond it since it's the max-width.
Note: If you are not using box-sizing: border-box, if you add padding to the class which already has width:100%, the padding will be added as an extra to the element's resulting width which will cause it to go beyond the max-width and in small screens you will be able to side scroll your pages = not good.
I'm having some odd space issues on the left of my site. For some reason there is slightly more space on the left than on the right in mobile view, thus looking off-centered. I'm guessing its off for desktop view as well, but its not noticeable. I can't figure out what is making it this way. http://jeffreydowellphotography.com/
/* ---------->>> MOBILE gap/space issues <<<-----------*/
#media screen and (max-width: 400px) {
#pageWrapper { margin: 0;}
.sqs-layout .sqs-row .sqs-block:last-child {
padding-bottom: 0;
padding-top: 0;
}}
/* ---------->>> MOBILE center logo <<<-----------*/
#media only screen and (max-width: 400px) {
h1.logo {
text-align:center;
margin-bottom: 20px !important;
}}
/* ---------->>> MOBILE logo size <<<-----------*/
#media only screen and (max-width: 400px) {
.logo-image .logo img {
max-height: 110px;
margin: 5px;
width: auto;
}
.social-links {
padding-top: 20px;
}}
Try removing the margin: 5px; on .logo-image .logo img in your mobile styles. The image with the margin may be wider than the div that contains the image and it comes off as being non-centered.
UPDATE
I took a look at your site, its actually the margin on the .slide selector. Add this in your mobile styles:
.slide { margin: 0; }