My page has a white space on the right side when using margins and padding in the mobile view.
My page:
https://www.blazor.nl/uploads/get/a83c2617117c88b0/IMG-0002
My CSS:
.page-wrapper .page-container {
margin: 0;
padding: 0;
position: relative; }
.page-wrapper .page-container .content-wrapper {
margin: 0 50px 0 50px;
min-height: 600px;
position: relative;
top: -120px; }
.page-wrapper .page-container .content-wrapper .maincontent {
padding: 30px; } }
#media only screen and (min-width: 768px) and (max-width: 992px) {
.page-wrapper .page-container .content-wrapper .maincontent {
padding: 20px; } }
.page-wrapper .page-container {
margin: 0;
padding: 0;
position: relative; }
.page-wrapper .page-container .content-wrapper > h2 {
color: #ffffff;
margin: 0 0 10px;
font-weight: 300; }
#media (max-width: 767px) {
.page-wrapper .page-container .content-wrapper > h2 {
color: #696969;
font-size: 24px; } }
#media (max-width: 992px) {
.page-wrapper .page-container .content-wrapper {
margin: 30px 30px 0 150px; } }
#media (max-width: 767px) {
.page-wrapper .page-container .content-wrapper {
margin: 15px; } }
I am using a snippet which can be found here: https://bootsnipp.com/snippets/dexRM. I also use Bootstrap 3.
Thanks
Related
Why does the width of my site stretch to the edges of the browser in Internet Explorer? What am I missing?
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%; }
.site-main {
padding: 10vw 10vw 5vw;
max-width: 1110px; }
#media (min-width: 1440px) {
.site-main {
padding: 154px 154px 77px;
margin-left: auto;
margin-right: auto; } }
#media (max-width: 760px) {
.site-main {
padding: 5vw 5vw 5vw; }
}
I believe this code covers the relevant parts.
#jeremy, please check the below working example in your browser(based on your css, with some minor modifications) and see if that issue still exists.
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.site-main {
padding: 10vw 10vw 5vw;
max-width: 1110px;
margin-left: auto;
margin-right: auto;
}
#media (min-width: 1440px) {
.site-main {
padding: 154px 154px 77px;
}
}
#media (max-width: 760px) {
.site-main {
padding: 5vw 5vw 5vw;
}
}
<div class="site-main" style="background: #eee"> </div>
Padding just puts space around the content, but not around the edges of the div with your site-main class.
Here is a fiddle with your code, changed padding to margin, and some color added to show the difference:
https://jsfiddle.net/qxp098j3/4/
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.site-main {
margin: 10vw 10vw 5vw;
max-width: 1110px;
background-color:Blue;
}
#media (min-width: 1440px) {
.site-main {
margin: 154px 154px 77px;
}
}
#media (max-width: 760px) {
.site-main {
margin: 5vw 5vw 5vw;
}
}
<body>
<div class="site-main">
blah blah blah
</div>
</body>
Im very confused at the moment, so im trying to create a responsive website.
For some reason my media queries are not triggering? I have the below CSS and it works fine from X-Small Below 480px and up to 575.98px. but past the media query, anything that I add into the 767.98px range isnt working at all?
#media only screen and (min-width : 480px) {
.card-4{
display: none;
}
}
#media (max-width: 575.98px) {
#about{
padding: 0 0.5rem 0 0.5rem;
}
.about-photo img{
width: 70%;
}
.about-text{
margin: auto;
text-align: center;
padding: 1rem 0 3rem 0;
}
.about-text h1, .about-text p{
text-align: center;
float: none;
}
.table{
margin: 0;
padding-left: 0;
}
.table li{
margin: auto;
padding-top: 0.3rem;
padding-left: 2rem;
text-align: left;
}
#skills-list{
margin: 0 2rem 0 2rem;
}
#skills-list li{
text-align: left;
padding-bottom: 1rem;
}
.card-1{
display: none;
}
.card{
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
}
.cards-container{
margin: 0 !important;
}
.timeline > li > .timeline-panel {
width: 85%;
float: right;
padding: 1.2rem;
}
.timeline:before {
left: 6%;
}
.timeline > li > .timeline-badge {
width: 44px;
height: 44px;
left: 6%;
}
.timeline > li > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.square-1-text, .square-2-text, .square-3-text{
height: 31rem;
}
.square-1{
order:1;
}
.square-1-text{
order:2;
}
.square-2{
order:3;
}
.square-2-text{
order:4;
}
#passions-section{
padding-bottom: 0;
}
#skills-list li.i{
list-style-position: outside !important;
display: none;
}
/*// Small devices (landscape phones, less than 768px)*/
#media (max-width: 767.98px) {
}
/*// Medium devices (tablets, less than 992px)*/
#media (max-width: 991.98px) {
}
/*// Large devices (desktops, less than 1200px)*/
#media (max-width: 1199.98px) {
}
Using the right breakpoints in your CSS media queries is likely the most important decision when implementing a fully responsive site.
Min-width: 320px (smaller phone viewpoints)
Min-width: 480px (small devices and most phones)
Min-width: 768px (most tablets)
Min-width: 992px (smaller desktop viewpoints)
Min-width: 1200px (large devices and wide screens)
In your case Try this one
#media (min-width:500px) and (max-width:750px)
https://blendbee.com
This is a WordPress site. The top part of the header needs some styling improvements for smaller screen sizes:
Center the logo
Some padding or margin above the logo (so it doesn't touch the top bar)
Less whitespace above and below the menu icon
Here's the current HTML code:
<div class="header-wrap">
<header id="header" class="site-header " role="banner">
<div class="row">
<div class="large-12 small-12 columns">
<div class="logo">
<a href="https://blendbee.com/" title="BlendBee – Your Tea. Your Way." rel="home">
<img data-interchange="[https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png, (default)], [https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png, (retina)]" alt="" class="hideie" data-uuid="60a3bc00-c94c-c4ba-258c-a9faa107e418" src="https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png">
<img src="https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png" alt="" class="ie">
<noscript><img src='https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png' alt='BlendBee – Your Tea. Your Way.'></noscript>
</a>
</div>
<div id="mobile-menu-button" class="show-for-small">
<a class="secondary button" id="mobileMenuButton" href="#mobile-menu">
<span class="mobile-menu-icon"></span>
<span class="mobile-menu-icon"></span>
<span class="mobile-menu-icon"></span>
</a>
</div>
</div>
</div>
</header>
</div>
And related CSS:
#media screen and (max-width: 767px) {
.mix.half.mix_all {
width: 50%;
float: left;
}
.mix.mix_all {
width: 100%;
}
.sidebar.large-3.small-12.columns {
width: 100%;
float: none;
}
#soc-icons-wrap.closed {
margin-bottom: 20px;
height: 50px;
}
.large-6.small-12.columns p{
width: 100% !important;
}
#header.scroll-to-fixed {
position: static;
}
}
#mobile-menu-button .button {
margin-bottom: 0;
padding: 0.75em 0.5em;
width: auto
}
.mobile-menu-icon {
background: #fff;
height: 0.25em;
width: 2.5em;
display: block;
}
.mobile-menu-icon + .mobile-menu-icon {
margin: 0.25em 0 0
}
#media only screen and (min-width: 767px) {
body.admin-bar #header.scroll-to-fixed {
top: 32px;
}
}
#media only screen and (max-width: 767px) {
.logo {
float: none;
text-align: center;
}
#header.scroll-to-fixed {
position: static !important;
height: auto;
width: auto;
border-bottom: none;
}
#header.scroll-to-fixed .logo {
width: 300px;
padding-top: 20px;
position: static;
top: 0;
margin: 0 auto;
}
#header.scroll-to-fixed .logo img {
max-height: 140px;
width: 100%;
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
#mobile-menu .tiled-menu {
float: none;
margin: 0;
padding: 0;
}
#mobile-menu .main-menu-item {
float: none;
width: 100% !important;
}
#mobile-menu .menu-tile {
height: 60px !important;
background-image: none !important;
}
#mobile-menu .item-title,
#mobile-menu .tiled-menu > .menu-item-language > a {
top: 5px;
font-size: 20px;
left: 25px;
}
#mobile-menu .tile-icon,
#mobile-menu .tiled-menu > .menu-item-language:before {
right: 10%;
width: auto;
}
#mobile-menu .tiled-menu > .menu-item-language {
height: 60px !important;
}
#mobile-menu .style-metro .sub-menu {
padding-top: 3px;
}
}
#media only screen and (min-width: 640px) and (max-width: 1024px) {
.tiled-menu .sub-menu {
position: absolute;
}
.tiled-menu {
text-align: center;
}
.main-menu-item {
text-align: left;
}
.tiled-menu .metro-menu-item .sub-menu {
position: absolute;
}
}
wrapper i {
margin: 84px 0 0 110px;
}
.entry-header .entry-meta .entry-tags {
margin-left: 0;
}
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns {
position: relative;
top: 12px;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns .answer {
width: 33%;
margin-top: 20px;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns .answer input {
padding: 18px 5px;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns {
width: 13%;
margin-top: 20px;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
width: 33%;
margin-top: 20px;
}
.site-header {
border-bottom: none;
}
ol ul, ul ol, ul ul, ol ol {
-webkit-margin-before: 0px;
-webkit-margin-after: 10px;
}
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns p {
float: left;
width: 70%;
text-align: left;
margin-top: 0;
}
#media only screen and (min-width: 320px) and (max-width: 767px) {
.tiled-menu {
left: -3px !important;
}
.tiled-menu>li>ul {
padding-top: 0;
}
}
#media screen and (max-width: 320px) {
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
text-align: center;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
margin-left: 28%;
margin-top: 0;
width: 52%;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
margin-top:0 ;
}
.large-3.small-12.columns input{
width: 145px;
}
}
#media screen and (min-width: 321px) and (max-width: 480px) {
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
text-align: center;
}
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
text-align: center;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
margin-left: 36%;
margin-top: 0;
width: 35%;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
margin-top:0 ;
}
.large-3.small-12.columns input{
width: 148px;
}
}
#media screen and (min-width: 480px) and (max-width: 800px) {
.site-header .logo {
margin: 0 auto 20px;
}
.site-header.scroll-to-fixed .logo {
margin: 0;
}
}
#media screen and (min-width: 481px) and (max-width: 568px) {
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
text-align: center;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
margin-left: 38%;
margin-top: 0;
width: 30%;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
margin-top:0 ;
}
.large-3.small-12.columns input{
width: 149px;
}
}
#media screen and (min-width: 569px) and (max-width: 600px) {
.category-submenu .sub-nav .sub-nav dd {
margin-left: 0.8rem !important;
margin-bottom: 0;
}
.mix .entry-thumbnail img {
width: 100% !important;
}
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
text-align: center;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
margin-left: 38%;
margin-top: 0;
width: 28%;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
margin-top:0 ;
}
.large-3.small-12.columns input{
width: 148px;
}
.pricetable-column {width: 50% !important;}
}
#media screen and (min-width: 768px) and (max-width: 800px) {
.large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns p{
float: left;
width: 56%;
text-align: left;
margin-top: 0;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns {
width: 13%;
margin-top: 20px;
}
.large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
width: 26%;
margin-top: 20px;
}
}
#media screen and (min-width: 768px) and (max-width: 1000px) {
.logo {
float: none;
margin: 0 auto;
}
#header.scroll-to-fixed .logo {
display: none;
}
.main-menu-item {
display: inline-block;
margin-left: 0;
float: none;
text-align: left;}
.tiled-menu {
float: none;
text-align: center;
}
}
#media screen and (min-width: 640px) and (max-width: 767px) {
.tiled-menu>li>ul {
padding-top: 25px;
}
}
If anyone can help, I'd be much appreciative - thanks :)
First - Try using this code for centering your logo and adding some padding to the top:
.logo {
padding-top: 50px;
width: 280px;
margin: auto;
}
Enter this code in the "Custom CSS" part when you open your customizer.
Second - This code for removing some white space below your menu icon:
#mobile-menu-button {float: none;text-align: center;}
Replace this part in the responsive.min.css file.
Third - This code for removing some white space above your menu icon:
#mobile-menu-button {
margin: 1rem 0 0;
}
Replace this part in the foundation.css file.
As you will see, it works:
I have a media query written but it breaks at certain point, I am now trying to optimize the query to the following :
#media only screen and (max-width: 1366px) and (min-width: 1280px) {
}
#media only screen and (max-width: 1280px) and (min-width: 1024px) {
}
#media only screen and (max-width: 1024px) and (min-width: 768px) {
}
#media only screen and (max-width: 768px) and (min-width: 640px) {
}
#media only screen and (max-width: 640px) and (min-width: 320px) {
}
Here is the one which i am using now
#media only screen and (max-width: 1366px) {
.menuTemplate3
{
margin-top: 3%;
}
.menuTemplate3 a
{
padding: 0 30px;
}
.wrap{
width:95%;
}
.span_of_2 {
padding: 3% 0;
margin: 4% 0;
}
.menu li {
margin: 6px 16px;
}
}
#media only screen and (max-width: 1280px) {
.menuTemplate3
{
margin-top: 3% !important;
}
.menuTemplate3 a
{
padding: 0 25px !important;
}
.wrap{
width:95%;
}
.menu li {
margin: 6px 12px;
}
.booking_room h4 {
font-size: 1.2em;
}
.booking_room p {
font-size: 0.8125em;
}
.f_nav li {
margin-left: 10px;
}
}
#media only screen and (max-width: 1024px) {
.menuTemplate3
{
margin-top: 3% !important;
}
.menuTemplate3 a
{
padding: 0 17px !important;
}
.wrap{
width:95%;
}
.menu li {
margin: 10px 8px;
}
.menu li a {
font-size: 0.8725em;
}
.reservation ul li.span1_of_3 {
width: 14.33333%;
margin-left: 15px;
}
.f_nav li a {
padding: 0 0px;
}
.grid1_of_3 {
float: left;
width: 100% !important;
margin-left: 0%;
}
}
#media only screen and (max-width: 768px) {
.menuTemplate3
{
margin-top: -3% !important;
}
.menuTemplate3 a
{
padding: 0 9px !important;
}
.wrap{
width:95%;
}
.row .grid_3 {
float: right;
width: 38.333333% !important;
}
.menu {
display: none;
}
.logo img
{ margin-left: -14% !important; }
.h_right {
width: 100%;
float: none;
}
.row {
width: 70% !important;
}
.top-nav {
display: block;
margin: 10px 0;
z-index: 999;
position: relative;
}
.nav a{
display: block;
}
.reservation ul li {
float: none;
display: inline-block;
}
.booking_room {
float: none;
width: 98%;
}
.reservation {
float: none;
width: 98%;
}
.b_room {
display: inline-block;
}
.grid1_of_3 h4 a {
font-size: 1.4em;
}
.copy {
float: none;
text-align:center;
}
.f_nav {
float: none;
text-align:center;
margin-top: 20px;
}
.soc_icons {
text-align: center;
margin: 20px 0;
}
.content {
float: none;
width: 100%;
margin-right: 0%;
}
.sidebar {
float: none;
width: 100%;
padding-left: 0%;
border-left: none;
}
.sidebar h4 {
margin: 4% 0 4%;
}
.sel_room {
float: none;
width: 100%;
}
.sel_room.left {
margin-left: 0%;
}
.service_list li {
width: 48.3333%;
margin-bottom:4%;
}
.service_list li:nth-child(3){
margin-left: 0;
}
.reservation h5 {
margin: 10px 0;
}
}
#media only screen and (max-width: 640px){
.menuTemplate3
{
margin-top: 3% !important;
}
.menuTemplate3 a
{
padding: 0 8px;
}
.wrap{
width:95%;
}
.logo{
width: 20%;
}
.h_right{
width:100%;
}
.row .grid_3 {
width: 70.333333% !important;
}
.reservation ul li.span1_of_1 {
width: 100%;
}
.row .grid_3 {
width: 70.333333% !important;
}
.book_date input[type="text"] {
width: 96% !important;
}
.reservation ul li.left {
margin-left: 0px;
}
.reservation ul li.span1_of_2 {
width: 49.33333%;
}
.reservation ul li.span1_of_3 {
width: 47.33333%;
margin-left: 10px;
}
.grid1_of_3 {
float: left;
width: 100%;
margin-left: 0%;
}
.grid1_of_3 h4 a {
margin: 2% 0;
}
.grid1_of_3 img{
margin-top:4%;
width: 10%;
}
.online_reservation {
margin-top: -30px;
}
.reservation ul li.span1_of_2 {
width: 48.33333%;
}
.res_btn form input[type="submit"] {
width: 50% !important;
padding: 10px;
}
.contact_left {
float: none;
margin-right: 0%;
width: 100%;
}
.contact_right {
float: none;
width: 100%;
}
.logo img{
margin-left: 0%;
margin-top: 2%;
}
}
#media only screen and (max-width: 530px) {
.menuTemplate3
{
margin-top: -11%;
width: 70%;
}
.menuTemplate3 a
{
padding: 0 15px;
}
.wrap{
width:95%;
}
.logo{
width: 32.333333%;
}
.h_right{
width:60.333333%;
}
.row .grid_3 {
width: 70.333333% !important;
}
.online_reservation {
margin-top: 0px;
}
.date_btn {
margin: 0 0 20px;
}
.logo img{
margin-left: 0%;
margin-top: 2%;
}
}
#media only screen and (max-width: 320px) {
.menuTemplate3
{
margin-top: -11%;
width: 70%;
}
.menuTemplate3 a
{
padding: 0 15px;
}
.wrap{
width:95%;
}
.logo{
width: 38.333333%;
}
.h_right{
width:60.333333%;
}
.row .grid_3 {
width: 70.333333% !important;
}
.reservation {
padding: 10px;
width: 97%;
}
.booking_room {
width: 97%;
padding: 10px;
}
.hide{
display: none;
}
.reservation ul li.span1_of_2 {
width: 100%;
}
.reservation ul li.span1_of_3 {
width: 100%;
margin-left: 0px;
}
.book_date input[type="text"] {
width: 93% !important;
}
.soc_icons ul li {
margin-left: 0px;
}
.grids_of_img {
float: none;
width: 100%;
}
.grids_of_para {
float: none;
width: 100%;
margin-left: 0%;
}
.span2_of_1 {
float: none;
width: 100%;
margin-left: 0%;
}
.res_btn form input[type="submit"] {
width: 60% !important;
padding: 10px;
}
.service_list li {
float:none;
margin-left:0;
width: 100%;
margin-bottom: 4%;
}
.contact-form input[type="text"], .contact-form textarea {
width: 93% !important;
}
.contact-form input[type="submit"] {
padding: 10px;
width: 50% !important;
}
.logo img{
margin-left: 0%;
margin-top: 2%;
}
}
Can anybody help me with the use the optimized media query? I am confused to place the classes.
you should use max-width and min-width both for media query like this is example
You'll want to use both min and max widths to optimize:
#media (min-width: 1281px) and (max-width: 1366px) {
}
#media (min-width: 1025px) and (max-width: 1280px) {
}
#media (min-width: 769px) and (max-width: 1024px) {
}
#media (min-width: 641px) and (max-width: 768px) {
}
#media (min-width: 321px) and (max-width: 640px){
}
#media (min-width: 1px) and (max-width: 320px) {
}
Once I accidentally left out some proper syntax for my media queries at the stated mobile viewport. It displayed correctly, which is awesome, but I'd like to be using the correct syntax, and am curious to know why / how this is occurring. Below are the styles involved.
/* Smartphones (Landscape) ----------- */
#media only screen and (min-width: 320px) and (max-width: 480px)
ul.ui-tabs-nav li.ui-state-active a {
background-color: #C6C699;
height: 17px;
text-shadow: none;
width: 77px;
}
.content .full header, .content .full .entry-summary, .content .full .entry-content, .content .full .entry-meta, .content .full .edit-link {
margin-top: 3px;
padding: 15px;
width: 100%;
}
#topbgimg { display: none; }
#topvidarea {
margin-left: 21%;
margin-right: 20%;
margin-top: -5px;
max-width: 400px;
}
#topmenucontain { display: none; }
.fmenu { display: none; }
#clogo { display: none; }
#youtube1, #youtube2 { display: none; }
#wrapper {
margin: 0 1em;
}
h1 {
font-size: 2em;
}
#logoimg { display: none; }
#notification {
height: 200px;
margin: 0;
width: 100%;
padding-top:20px;
}
.ui-tabs .ui-tabs-nav li a {
border: 3px solid white;
color: white;
}
#branding {
width: 100%;
padding: 1em 0;
margin: 0;
text-align: center;
}
#topbtn, #topbtn2, #topbtn3 {
width: 75px;
}
#topbtnbuy {
background: none repeat scroll 0 0 #C6C699;
border: 1px solid #C6C699;
color: #333333;
display: inline;
float: left;
font-family: Georgia;
font-size: 12px;
height: 42px;
margin-right: 10px;
margin-top: -1px;
width: 25%;
}
a.box:link {
min-width: 70%;
}
nav#access {
border-bottom: 1px dashed #CFCFCF;
position: relative;
text-align: center;
}
nav#access ul.menu li:nth-child(n+5) {
display: none;
}
.content {
min-height: 0;
background-image: none !important;
border-bottom: 1px dashed #CFCFCF;
}
/* Hide Background & Overlay Images */
.overlay {
display: none;
}
.has-background {
min-height: 0;
}
.content header, .content .entry-summary,
.content .entry-content, .content .edit-link,
footer.entry-meta {
width: 100%;
}
.content header, .has-background header {
margin-top: 2em;
}
.content header h2 a, .single .content header h2 {
font-size: 2em;
}
.content section.right,
.content section.left,
.content section.full,
.content section.center {
padding: 0;
}
.content section.center header,
.content section.center .entry-summary,
.content section.center .entry-content,
.content section.center .edit-link,
.content section.center footer.entry-meta,
.content section.right header,
.content section.right .entry-summary,
.content section.right .entry-content,
.content section.right .edit-link,
.content section.right footer.entry-meta {
left: 0;
}
#comments {
margin: 1em 0;
}
#comment, #commentform input,
#commentform #submit, #commentform #comment {
width: 416px;
}
.commentlist {
width: 424px;
}
#commentform #submit {
width: 430px;
}
#comments, #commentform #comment-reply {
width: 100%;
}
.cat-links, .entry-meta .sep:nth-child(n+4),
.comments-link, .edit-link {
display: none;
}
/* Footer */
#footer {
width: 100%;
padding: 1em 0;
}
#footer-widgets {
margin-bottom: 1em;
}
#footer .widget {
width: 45%;
margin: 0.5em 0;
}
.third-box {
width: 89%;
}
#buybutton { width: 95%; }
.scrolldowntext { margin-top: 40px; }
#notification {
background-color: #333333;
border-bottom: 5px solid #C6C699;
font-size: 22px;
height: 200px;
padding-top: 20px;
position: absolute;
width: 100%;
z-index: 9990;
}
#topcaption {
display: none;
}
#logoimg { display: none;}
#topmenucontain {
margin: -33px auto 0;
width: 50%; }
a.box:link {
color: #C6C699;
display: inline;
float: left;
font-family: Georgia;
font-size: 12px;
height: 50px;
margin-right: 10px;
min-width: 75px;
}
#videoscreenshot { height: 215px; width: 100%; }
.fancybox-iframe { display: hidden; }
}
Once I left out the additional { at the end of '#media only screen and (min-width: 320px) and (max-width: 480px)' all my media queries were being read?
Update: Just tried removing all styles within specified above viewport, in attempts to start from scratch properly in case some styles were whatever.
BUT, within starting, I simply am trying to hide the top menu within the viewport. And this is ignored and not rendering for some reason?
/* Smartphones (Landscape) ----------- */
#media only screen and (min-width: 320px) and (max-width: 480px) {
#topvidarea {
margin-left: 24%;
margin-right: 20%;
margin-top: -265px;
max-width: 400px;
}
#topmenucontain { display: none; }
}
You have no opening bracket in your media query but you do have a closing one:
#media only screen and (min-width: 320px) and (max-width: 480px) {
......
}
All your other media queries where probably being read because you were not properly closing your first query, and thus the query did not know where to begin and end.