I made a Netflix clone and I was working on making it responsive. It was working fine and giving the desired output in VS Code but then I uploaded it to a live website to check if it is working then, but the responsiveness was no longer working as expected.
Below is the media queries code >>>>
#media screen and (max-width:768px) {
.logobtn img{
height: 30px;
}
img.dropdown{
height: 10px;
width: 15px;
}
.btn:nth-child(1){
margin-right: 10px;
}
.content{
/* padding: 0px; */
width: 330px;
margin-left: -20px;
}
.content h1{
font-size: 30px;
line-height: 37px;
padding: 0;
}
.content h3{
padding: 0;
width: 375px;
font-size: 24px;
}
.form{
flex-direction: column;
position: relative;
height: 40px;
}
.email{
margin-left: -155px;
/* margin-right: -100px; */
padding-right: 0px;
}
.submit{
position: absolute;top: 50px;
/* border-radius: 10px; */
}
.row{
flex-direction: column;
}
}
Related
So I am trying to validate my website and keep getting a parse error for one of my media queries section of my style sheet. When I just copy and paste that section of code into the W3 CSS Validator it shows its fine but when the whole sheet is up it finds an error somewhere in there. Here is what I have:
/* CSS Document for:
Chris Quantrell: Illustration, Graphic and Web Design
By: Chris Quantrell
*/
.primaryContainer {
height: auto;
margin-left: auto;
margin-right: auto;
min-height: 100%;
background-image: url(../img/shattered_#2X.png);
background-attachment: scroll;
background-size: auto;
background-size: auto;
background-position: 0% 0%;
background-repeat: repeat repeat;
font-family: source-sans-pro, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 100;
font-size: 16px;
color: rgba(18, 18, 18, 1.00);
}
#logo_container {
float: none;
height: auto;
margin: 12px;
clear: none;
width: 1050px;
min-width: 0px;
margin-left: auto;
margin-right: auto;
}
#bear_logo {
float: left;
width: 100%;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
clear: none;
color: rgb(0, 0, 0);
min-width: 0px;
}
#contact_info_stripe {
background-color: #E2231A;
width: 100%;
}
#contact_info_box {
float: none;
height: auto;
margin-left: auto;
margin-top: 0px;
clear: none;
width: 1050px;
margin-right: auto;
background-color: #E2231A;
padding: 10px;
color: white;
text-align: right;
font-size: 140%;
}
/* about me section */
#about_me_box {
float: none;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
clear: none;
width: 1050px;
min-height: 0px;
padding-left: 157px;
padding-right: 10px;
background-color: white;
background-image: url(../img/bear_aboutme.png);
background-size: 100%;
background-repeat: no-repeat;
}
#about_me_box p {
width: 575px;
height: auto;
margin-left: auto;
margin-top: 0px;
text-align: justify;
padding: 10px;
font-size: 110%;
}
/* Gallery Stuff */
#gallery_container {
float: none;
height: auto;
margin: 0px auto;
clear: none;
width: 1050px;
min-height: 0px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 100px;
background-color: white;
}
.gallery_cell {
width: 320px;
height: 320px;
float: left;
margin: 10px;
display: block;
border: thick #F00;
}
a:hover.gallery_cell {
border: 10px rgba(255, 0, 4, 1.00);
}
/* Button Stuff */
.button {
display: block;
height: 80px;
width: 275px;
background: #E2231A;
font-weight: 800;
font-size: 200%;
color: white;
text-align: center;
padding-top: 16px;
float: right;
margin-left: 16px;
margin-bottom: 16px;
}
a.button {
text-decoration: none;
}
a:visited.button {
text-decoration: none;
color: white;
}
a:hover.button {
color: white;
}
/* Headline Section */
h1 {
font-size: 360%;
font-weight: 900;
text-align: right;
}
h2 {
font-size: 160%;
font-weight: 500;
margin-top: 0px;
margin-bottom: 4px;
}
h3 {
font-size: 200%;
font-weight: 800;
margin-top: 32px;
margin-bottom: -10px;
color: #E2231A;
text-align: right;
margin-right: 12px;
}
h4 {
font-size: 200%;
font-weight: 800;
margin-top: 32px;
margin-right: 10px;
color: #E2231A;
text-align: right;
margin-bottom: 12px;
}
/* Tablet Styles */
#media only screen and (max-width: 1049px) {
.primaryContainer {
background-image: url(../img/shattered.png);
}
#logo_container {
width: 100%;
margin-bottom: 12px;
}
#contact_info_box {
width: 100%;
}
#about_me_box {
width: 100%;
padding-right: 10px;
padding-left: 20%;
background-size: 60%;
background-position: left 36px;
}
#about_me_box p {
width: 100%;
padding-left: 10%;
}
.button {
width: 43.5%;
margin-left: 1%;
margin-right: 1%;
height: 54px;
font-size: 150%;
padding-top: 10px;
}
#bear_logo {
width: 98%;
margin-left: 1%;
margin-right: 1%;
float: left;
margin-top: 0px;
clear: none;
}
#gallery_container {
width: 100%;
}
#gallery_grid {
margin-left: auto;
margin-right: auto;
display: block;
}
.gallery_cell {
width: 30%;
height: 30%;
margin-left: 1%;
margin-top: 15px;
}
/*Phone Styles*/
#media only screen and (max-width: 640px) {
#logo_container {
margin-top: 4px;
margin-left: 1%;
clear: none;
width: 98%;
margin-right: 1%;
}
#about_me_box {
margin-right: 1%;
margin-left: 1%;
padding-left: 1%;
padding: 1%;
width: 98%;
background-image: none;
}
#about_me_box p {
width: 98%;
margin-left: 1%;
margin-right: 1%;
padding-left: 0px;
}
.button {
width: 100%;
height: 54px;
font-size: 150%;
padding-top: 10px;
}
#bear_logo {
width: 100%;
}
#contact_info_box {
width: 98%;
margin-right: 1%;
margin-left: 1%;
padding: 1%;
}
#gallery_container {
width: 98%;
margin-right: 1%;
margin-left: 1%;
padding: 1%;
}
.gallery_cell {
width: 48%;
height: 48%;
margin-left: 1%;
margin-right: 1%;
margin-top: 8px;
}
}
#media only screen and (max-width: 400px) {
.gallery_cell {
width: 98%;
height: 98%;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
}
}
Any and all help would be greatly appreciated!
You aren't closing the tablet styles #media with a }.
/* Tablet Styles */
#media only screen and (max-width: 1049px) {
.primaryContainer {
background-image: url(../img/shattered.png);
}
#logo_container {
width: 100%;
margin-bottom: 12px;
}
#contact_info_box {
width: 100%;
}
#about_me_box {
width: 100%;
padding-right: 10px;
padding-left: 20%;
background-size: 60%;
background-position: left 36px;
}
#about_me_box p {
width: 100%;
padding-left: 10%;
}
.button {
width: 43.5%;
margin-left: 1%;
margin-right: 1%;
height: 54px;
font-size: 150%;
padding-top: 10px;
}
#bear_logo {
width: 98%;
margin-left: 1%;
margin-right: 1%;
float: left;
margin-top: 0px;
clear: none;
}
#gallery_container {
width: 100%;
}
#gallery_grid {
margin-left: auto;
margin-right: auto;
display: block;
}
.gallery_cell {
width: 30%;
height: 30%;
margin-left: 1%;
margin-top: 15px;
}
} /* <- Missing that */
/*Phone Styles*/
#media only screen and (max-width: 640px) {
#logo_container {
margin-top: 4px;
margin-left: 1%;
clear: none;
width: 98%;
margin-right: 1%;
}
#about_me_box {
margin-right: 1%;
margin-left: 1%;
padding-left: 1%;
padding: 1%;
width: 98%;
background-image: none;
}
#about_me_box p {
width: 98%;
margin-left: 1%;
margin-right: 1%;
padding-left: 0px;
}
.button {
width: 100%;
height: 54px;
font-size: 150%;
padding-top: 10px;
}
#bear_logo {
width: 100%;
}
#contact_info_box {
width: 98%;
margin-right: 1%;
margin-left: 1%;
padding: 1%;
}
#gallery_container {
width: 98%;
margin-right: 1%;
margin-left: 1%;
padding: 1%;
}
.gallery_cell {
width: 48%;
height: 48%;
margin-left: 1%;
margin-right: 1%;
margin-top: 8px;
}
}
#media only screen and (max-width: 400px) {
.gallery_cell {
width: 98%;
height: 98%;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
}
}
It now validates at the the W3C validator
I'm trying to insert a simple media query so that the submit form spans 90% width of the page when viewed on a phone (it's set to 50% at all other times). When I scale the viewport down, it doesn't pick up the media query. Here is my code:
scss:
#media(max-width:767px){
.submit{
width: 90%;
}
}
.submit{
width: 50%;
margin: auto;
margin-top: 300px;
margin-bottom: 300px;
.submitBackground{
background-color: $orange;
opacity: .6;
padding: 20px;
}
.submitEvent{
background-color: white;
opacity: .6;
button{
margin-top: 15px;
margin-bottom: 15px;
}
}
}
form{
width: 80%;
margin: auto;
text-align: center;
padding: 20px;
.form-control{
margin: 10px;
}
.radio-inline{
margin: 10px;
position: relative;
}
}
Your media query needs to be after the non-media query declaration. Otherwise it will not be able to override the property.
.submit {
...
}
#media (max-width:767px) {
.submit{
width: 90%;
}
}
I have this CSS for desktop version:
div.bottomnav_table_left {
width: 50%;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 0px;
display: table-cell;
}
div.bottomnav_table_spacer {
width: 10px;
display: table-cell;
}
div.bottomnav_table_right {
width: 50%;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 0px;
display: table-cell;
}
And this CSS for a small window version:
#media screen and (max-width: 700px) {
div.bottomnav_table_left {
width: 100%;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 0px;
float: left;
}
div.bottomnav_table_spacer {
display: none;
width: 0px;
height: 0px;
}
div.bottomnav_table_right {
width: 100%;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 0px;
float: left;
}
}
(I have tried limit the CSS code examples to the core. I hope that is okay.)
On IE, Opera, Chrome and FireFox I can resize window up and down and it works well. However, on Safari it will work on the initial size, but resizing the browser window will only work once.
If you resize Safari back (e.g. small to desktop to small) it no longer works. It does not place the DIVs on top of each other, instead they are placed next to each other horizontally.
I'm starting with HTML and CSS and i have written my first page for my friend. Problem is that my code seems to be pretty bad, cause when i try to change few things, whole page almost crashes.
map of my page:
http://i.stack.imgur.com/0U1lO.png
So here's the thing:
Logo + navigation menu
here's code:
#logo {
margin-left: 15%; }
nav {
float: left;
margin-left: 10%;
margin-top: 1%;
font-weight: bold;
vertical-align: central; }
a {
text-decoration: none; }
nav ul {
list-style-type: none; }
nav li {
float: left;
margin-right: 10px;
}
Slider is only thing made well i think, cause i made it margin-left and right on: auto;
Here starts the fun:
code of news:
.newsy {
font-weight: 900;
font-size: xx-large;
margin-left: 15%;
color: black; }
.image-box {
position: relative;
margin-left: 15%;
width: 640px;
height: 300px; }
.image-box span {
position: absolute;
bottom: 0;
left: 0;
background: rgba(0,0,0, .5);
color: white;
padding: 15px;
}
.community-box {
margin-right: 15% ;
float: right;
}
.baner-box {
float: right;
width: 270px;
height: 500px;
margin-right: 15%; }
.baner-box baner {
margin: 40px;
}
.autor {
border: solid 0px white;
background-color: white;
margin-left: 15%;
padding: 10px;
padding-left: 20px;
width: 610px;
background-color: white;
position: relative;
font-weight: bolder;
font-size: 13px;
font-kerning: normal; }
.readmore {
position:absolute;
bottom: 0;
right: 0;
width: 90px;
padding: 10px;
padding-left: 20px;
background-color: rgba(0,0,0, .9);
color: white;
}
When i try to move them from center to a bit of left whole page is crashing.
Also my community boxes (facebook, YT and twitter) aren't too properly set.
Can anybody help me and say what mistakes I have made ? It's really important.
Greets.
P.S. tell me if you need whole code i can upload package of it.
this may be happen because the width and height's pixel is may be greater than your display's pixel so i suggest you to give it in %
like
.baner-box {
float: right;
width: 40%;
height: 50%;
margin-right: 15%; }
may be work for you
SOLVED: Tom: You were so right. Unfortunately WordPress function wp_head() was adding the width=1100 because of a plugin. Thanks!
I'm working on a new responsive website, but can't seem to get the #media query to work.
It does work when resizing the browser window on my desktop, but it won't work on my ipad, iphone or android phone.
What am I doing wrong?!
Here the link: http://demo.mindspins.com/atmnieuw/
Here's the link to the CSS: http://demo.mindspins.com/atmnieuw/wp-content/themes/atm/css/dynamic.php
Thanks in advance!
On request the CSS code:
#media all and (max-width: 1460px) {
.site-width{ width: 1199px; }
.main-width{ width: 719px; }
}
#media all and (max-width: 1220px) {
.site-width{ width: 959px; }
.main-width{ width: 479px; }
#page-title h1.thetitle{
font-size: 20px;
line-height: 24px;
}
.sidebar .widget a.form-button-link, .sidebar .widget span.form-button-link{
font-size: 20px;
line-height: 24px;
}
}
#media all and (max-width: 980px) {
.site-width{ width: 719px; }
.main-width{ width: 479px; }
.right-width{ display: none; }
#header-right{ display: none; }
.widgets-wrapper-1{ display: block; }
.widgets-wrapper-3{ display: block; position: relative; padding: 20px 0 0 20px; }
}
#media all and (max-width: 740px) {
.site-width{ width: 95%; margin: 0 auto;}
#header-wrapper{ width: 100%; }
#header-left{ display: none; }
#header-mid{ height: 80px; }
#atmlogo a.atm {
z-index: 100;
top: 24px;
left: 0;
}
.main-width{ width: 100%; }
.left-width{ width: 100%; }
.sidebar-left{ display: none; }
.site-bg{ display: none; }
#header-left span.header-contact{ height: 80px; width: 100%;}
#main-nav{ height:auto !important; }
#mobile-nav{
margin: -4px 0 1px 0;
display: block;
position: relative;
width: 100%;
}
#mobile-nav .nav-wrapper{
display: block;
color: #fff;
background: #cc0033;
margin: 1px 0;
height: 40px;
padding: 0 10px;
}
#mobile-nav .nav-wrapper select.atm-dropdown{
font-size: 12px;
display: block;
height: 40px;
width: 100%;
color: #fff;
background: #cc0033;
border: 0;
clear: both;
-webkit-border-radius: 0;
-webkit-appearance: none;
}
#mobile-nav .theme-s{
width: 100%;
background: #cc0033;
color: #fff;
}
#mobile-nav input.s{
background: #cc0033;
color: #fff;
}
#mobile-nav input.searchsubmit{
border-left: solid 1px #dcdcdc;
color: #fff;
background: #cc0033;
background-image: url(../images/icon_search.png);
background-repeat: no-repeat;
background-position: right top;
-webkit-border-radius: 0;
-webkit-appearance: none;
}
#primary{ display: none; }
#main-content-header{
height:auto !important;
margin: 0 0 1px 0;
}
#main-content-header span.header-image{
display: block;
float: left;
width: 25%;
height:auto !important;
margin: 0;
}
#main-content-header span.header-image img{
line-height: 0px;
margin: 0;
padding: 0;
}
#page-title{
height: 79px;
}
}
#media all and (max-width: 500px) {
body {
font-size: 12px;
line-height: 20px;
}
#footer-nav{ display: none; }
#copyrights{ display: none; }
.entry-content-bg{ padding: 20px; }
#page-title .title-wrapper{ padding: 0 20px }
#page-title h1.thetitle{
font-size: 16px;
line-height: 20px;
}
}
You can use this code in the head tag:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
On looking again, when using my iPhone 4S and the Remote Web Inspector introduced in iOS 6, I couldn't find any styles for anything below max-width: 1200px, even though they are in the CSS file. I don't know why this is.
Also, I wrote a blog post about Responsive design and Media Queries a few months, you can read it here if you wish. Not saying you're not good at media queries (it's a very nice site!) just hope it will be an interesting read for you :)
EDIT: just looking at your site again, I noticed in the head (right at the bottom) you have this code:
meta name="viewport" content="width=1100"
This could be why the styles weren't applying at anything below a screen width of 1100px or 1200px. Take this out and try it again.
It might have something to do with having your CSS in seperate files. As a general rule you should always write all your CSS in one file (style.css). It shouldn't do but just for clarity put them both in the same file and see what happens. If it doesn't work comment on this and I'll take another look.