Making paragraph responsive in CSS - css

I'm new to CSS and have encountered a problem. I'm trying to display paragraphs on my website on desktop/global view as
#aeromexico
p {
float: left;
position: fixed;
text-align: left;
max-width: 25%;
padding: 0px 0px 0px 0px;
display:inline-block;
}
but when viewed in mobile and tablet I want them to be viewed as
#aeromexico .col-sm
p {
object-position: top;
text-align: left;
max-width:100%;
display:block;
padding-bottom: 60px;
}
However the second part of the code for mobile view is being ignored and is still displaying as desktop view on mobile. I have attached my whole code below
/Desktop / Global View/
body {
max-width: 1366px;
margin-left: auto;
margin-right: auto;
font-family: 'Open Sans', sans-serif;
padding: 1px;
}
#homepage .col {
float: left;
}
.col-lg {
width: 33.3%;
}
.col-lg img {
width: 100%;
height: auto;
display: block;
}
.slicknav_menu {
display:none;
}
#menu {
float: right;
}
#menu li {
display:inline-block;
}
#menu li a {
text-decoration:none;
color: #454545;
padding: 8px;
font-size: 18px;
}
header {
padding: 10px 0px 20px 0px;
}
ul {
padding-top: 40px;
}
.mylogo {
width: 95px;
}
/*aeromexico*/
#aeromexico .row {
padding:5px;
}
#aeromexico .col {
width: 70%;
margin-right: auto;
float: right;
display:inline-block;
padding-bottom: 40px;
}
#aeromexico .col-lg {
width: 65%;
}
#aeromexico
p {
float: left;
position: fixed;
text-align: left;
max-width: 25%;
padding: 0px 0px 0px 0px;
display:inline-block;
}
/*Tablet View*/
#media (max-width: 768px) {
#menu li {
display:block;
text-align: right;
}
header {
padding:10px;
}
.col-md {
width: 50%;
}
.mylogo {
width: 95px;
}
body {
padding:10px;
}
}
/*Mobile View*/
#media (max-width: 400px) {
.slicknav_menu {
display:block;
}
#menu {
display:none;
}
alt {
width: 95px;
}
.mylogo {
width: 95px;
}
.col-sm {
width:100%;
}
body {
padding:10px;
}
#aeromexico .col-sm {
width:100%;
}
#aeromexico .col-sm
p {
object-position: top;
text-align: left;
max-width:100%;
display:block;
padding-bottom: 60px;
}
}

Did you set up the metatag for the viewport on the HTML header?
<meta name="viewport" content="width=device-width, initial-scale=1">

Related

Div following wrapper div floats behind wrapper

I am working on a fluid grid (DreamWeaver CC) site. I have a header-Wrapper div containing stacked elements using z-index. I am now trying to add a div after the header-Wrapper but this div is floating behind the header-Wrapper. This is my first time working with z-index so I'm rather flummoxed.
I have tried position and display css elements for the mobileNav div and also tried to use a height element for the header-wrapper. Nothing. the mobileNav div seems to be ignoring the header-Wrapper altogether and acting like it is the first div in the gridContainer.
Thanks for your help
site: miki.nantucket.net/redac-2.php
html
<body>
<div class="gridContainer clearfix">
<div id="header-wrapper" class="fluid">
<div id="rotation" class="fluid "><?php include $_SERVER['DOCUMENT_ROOT']."/includes/layout/rotations.php" ?></div>
<div id="Weather" class="fluid "><?php include $_SERVER['DOCUMENT_ROOT']."/includes/layout/weather.php" ?></div>
<div id="Navigation" class="fluid "><ul>
<li>Nav1</li>
<li>Nav2</li>
<li>Nav3</li>
<li>Nav4</li>
<li>Nav5</li>
<li>Nav6</li>
<li>This is not styled yet</li>
</ul></div>
</div><!--end header-wrapper-->
<div id="mobileNav" class="fluid">This is the content for Layout Div Tag "mobileNav"</div>
</div>
</body>
CSS
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 92.625%;
padding-left: 0;
padding-right: 0;
clear: none;
float: none;
background-color:#FBFAF6;
}
#header-wrapper {
position:relative;
width: 100%;
padding:0;
margin:0;
}
#rotation {
position:absolute;
z-index:1;
}
#Navigation {
display:none;
width: 100%;
}
#Weather {
text-align:right;
font-size:13px;
padding:5px 0px 10px 0px;
position:absolute;
z-index:50;
top:0px;
left:0;
background: #4b829f;
background: rgba(75,134,159, .8);
color: #ffffff;
}
#mobileNav {
position:relative;
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 93.4166%;
padding-left: 0;
padding-right: 0;
clear: none;
float: none;
margin-left: auto;
}
#header-wrapper {
}
#rotation {
}
#Navigation {
display:block;
position:absolute;
z-index:100;
top:49px;
left:0;
background: #4b8a9f;
background: rgba(75,134,159, .8);
color: #ffffff;
width: 23.7288%;
}
#Weather {
}
#mobileNav {
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
.gridContainer {
width: 88.875%;
max-width: 1232px;
padding-left: 0;
padding-right: 0;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
#header-wrapper {
}
#rotation {
}
#Navigation {
display:block;
position:absolute;
z-index:100;
top:49px;
left:0;
background: #4b8a9f;
background: rgba(75,134,159, .8);
color: #ffffff;
width: 17.7215%;
}
#Weather {
}
#mobileNav {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}
CSS for included responsive slider
/*responsive hero slider*/
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.caption {
position: absolute;
display: block;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
margin:0;
text-align: center;
background: #4b8a9f;
background: rgba(75,134,159, .8);
color: #ffffff;
font-size:18px;
font-stretch:expanded;
}
Thank you. Due to the various elements, I do need the absolute positioning but your comment about allowing for the space in the header-wrapper gave me an idea. I put an image into the header-wrapper, fiddled around with the z-index property here and there. Probably not the most elegant way to do it but it's working!
Thank you.
html
<div class="gridContainer clearfix">
<div id="header-wrapper" class="fluid">
<div id="rotation" class="fluid "><?php include $_SERVER['DOCUMENT_ROOT']."/includes/layout/rotations.php" ?></div>
<div id="Weather" class="fluid "><?php include $_SERVER['DOCUMENT_ROOT']."/includes/layout/weather.php" ?></div>
<div id="Navigation" class="fluid "><ul class="navBump">
<li>Nav1</li>
<li>Nav2</li>
<li>Nav3</li>
<li>Nav4</li>
<li>Nav5</li>
<li>Nav6</li>
<li>This is not styled yet</li>
</ul></div>
<div id="LogoWrapper" class="fluid "><div id="Logo" class="fluid "><img src="images/sitewide/Logo.png"></div><div id="LogoTag" class="fluid "><?php include $_SERVER['DOCUMENT_ROOT']."/includes/layout/logtag.php" ?></div></div>
<img src="images/rotations/redac2/image1a.jpg">
</div><!--end header-wrapper-->
<div id="mobileNav" class="fluid">This is the content for Layout Div Tag "mobileNav"</div>
</div>
CSS
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 92.625%;
padding-left: 0;
padding-right: 0;
clear: none;
float: none;
background-color:#FBFAF6;
}
#header-wrapper {
position:relative;
width: 100%;
padding:0;
margin:0;
}
#header-wrapper img {
position:relative;
z-index:1;
}
#rotation {
position:absolute;
top:0;
left:0;
z-index:5;
margin-left: 0;
width: 100%;
}
#Navigation {
display:none;
width: 31.0344%;
margin-left: 0;
}
#Weather {
text-align:right;
font-size:13px;
padding:5px 0px 10px 0px;
position:absolute;
z-index:50;
top:0px;
left:0;
background: #4b829f;
background: rgba(75,134,159, .8);
color: #ffffff;
margin-left: 0;
width: 100%;
}
#mobileNav {
z-index:0;
width: 100%;
margin-left: 0;
}
#LogoWrapper {
position:absolute;
top:0;
left:0;
z-index:1000;
}
#Logo {
}
#LogoTag {
font-size:12px;
color:#797979;
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 93.4166%;
padding-left: 0;
padding-right: 0;
clear: none;
float: none;
margin-left: auto;
}
#header-wrapper {
}
#rotation {
width: 100%;
margin-left: 0;
}
#Navigation {
display:block;
position:absolute;
z-index:100;
top:49px;
left:0;
background: #4b8a9f;
background: rgba(75,134,159, .8);
color: #ffffff;
width: 23.7288%;
margin-left: 0;
}
#Weather {
width: 100%;
margin-left: 0;
}
#mobileNav {
margin-left: 0;
width: 100%;
}
#LogoWrapper {
}
#Logo {
}
#LogoTag {
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
.gridContainer {
width: 88.875%;
max-width: 1232px;
padding-left: 0;
padding-right: 0;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
#header-wrapper {
}
#rotation {
width: 100%;
margin-left: 0;
}
#Navigation {
display:block;
position:absolute;
z-index:100;
top:49px;
left:0;
background: #4b8a9f;
background: rgba(75,134,159, .8);
color: #ffffff;
width: 24.0506%;
margin-left: 0;
}
#Weather {
width: 100%;
margin-left: 0;
}
#mobileNav {
width: 100%;
margin-left: 0;
}
#LogoWrapper {
}
#Logo {
}
#LogoTag {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}
rotating images CSS
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.caption {
position: absolute;
z-index:25;
display: block;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
margin:0;
text-align: center;
background: #4b829f;
background: rgba(75,134,159, .8);
color: #ffffff;
font-size:18px;
font-stretch:expanded;
}
Your #mobileNav is appearing behind all of the #header-wrapper content because all of the #header-wrapper content is using position: absolute;. Absolutely positioned elements like #Weather and #Navigation are removed from the flow of the document as if they were never there. You probably just want to float them into their positions, but if absolute positioning is required, then you'll need to account for them with some space in the parent element.

Overlay text forced out of containing div

I've tried this yesterday and it worked fine for me, it's basic enough, I just want to have a few lines of text overlay a background image (at 'nk'). Somewhere something has gone wrong - when the background image is at full size (which only seems to be possible by adding a png transparent image - full height not full width - to 'fill' it out) then the text seems to be forced from the containing div and its background image.
I'm using a drag and drop builder called Visual Composer, in this you can work with rows - .histy is the class I've attached to the problem div/row
and here is the page with the text problem:
http://dbtest.destinationballybunion.ie/?page_id=2755
Any ideas why now the text is being forced out of the containing div ? Thanks.
CSS for this page:
#container {
margin: 0%;
}
#container text area {
margin: 5%;
}
wrapper {
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
entry {
box-shadow: 0 0 0px rgba(0, 0, 0, 0);
padding: 0px;
}
entry-header.style {
position: absolute;
left: -9999px;
}
.entry-content a img,
#attachment-nav a img {
max-width: 98.5%;
padding: 0%;
box-shadow:0 0 3px #EEE;
background:#FFF;
border:#EEE 1px solid;
}
.entry-title {
display:none;
}
.single .entry, .page .entry, .error404 .entry {
margin-bottom: 5.1% !important;
padding: 0;
}
#site-title {
height:100%;
width:100%;
}
#site-title, #site-description {
line-height: 100%;
}
#site-title {
margin: 0 0;
}
#site-title img {
margin: 0;
}
#site-title img {
padding: 0;
}
#access {
background: url('http://dbtest.destinationballybunion.ie/wp-content/uploads/2014/03
/HISTORY-MENU-TOP.jpg');
background-repeat:no-repeat;
background-size: 100% 100%;
background-size: cover;
}
.histy {
background: url('http://dbtest.destinationballybunion.ie/wp-content/uploads/2014/06
/HISTORY-1-NT.jpg');
background-repeat:no-repeat;
background-size: 100% 100%;
background-size: contain;
}
.tourguides {
margin-top: 20px;
}
.walkback {
background-size: 100% 100%;
}
.walktrans {
height:100%;
width:100%;
}
.walktext {
background-color: transparent;
}
.walktext {
margin-top: 2.0vh;
}
.walktext p {
font-size: 24px;
font-size: 2.8vw;
}
.walktext p {
padding-left: 0.8vw;
padding-right: 2.5vw;
}
.walktext a {
color: #BD8346;
}
.walktext a:hover {
color: #827265;
}
.trailmenu h4 {
font-size: 23px;
}
.trailmenu h4 {
overflow: auto;
}
.trailmenu h4 span {
padding-top: 0px;
padding-right: 3px;
}
.trailmenu h4 span{
display: block;
float: left;
}
.trailmenu h4 img{
float: right;
padding-top: 10px;
}​
.trailmenu h4 img {
vertical-align:text-bottom;
}
h5 {
font-size: 21px;
}
h5 {
overflow: auto;
}
h5 span {
padding-top: 0px;
padding-right: 3px;
}
h5 span{
display: block;
float: left;
}
h5 img{
float: right;
padding-top: 20px;
}​
h5 img {
vertical-align:text-bottom;
}

my bootstrap styles won't render my mobile styles

my bootstrap mobile style won't render unless I add a extra closing brace to the end can someone tell me what I did wrong
this is the styles that I created and they should work but they are not working and they pass the validator test.
#media only screen and (max-width: 766px){
.movie{
width:300px;
height: 300px;
margin:0;
padding:0;
}
body > div > div > h3 {
margin-left: 300px;
padding-top: 200px;
}
a:link {
outline: 0;
font-size: 9px;
display: block;
padding-right: 50px;
}
h3{
font-size: 20px;
margin-top:20%;
}
h3.port {
margin-left: 150px;
color: #9932CC;
margin-top: 50px;
}
img {
float: left;
margin-right: 15px;
width:50%;
height:50%;
margin-top:0;
}
p {
margin-left: 10px;
margin-top:5%;
padding: 0;
color: #9932CC;
font-size: 15px;
}
.navbar .nav > li > a {
color: #9932CC;
}
body > div > div > a > img {
display: none;
}
.navbar-brand {
float: left;
padding: 10px 15px;
font-size: 20px;
}
/* twitter
====================================== */
div#iPhone {background: url("../images/iphone.png") no-repeat;
width:275px;height:500px;
display: inline-block;
padding-top: 90px;
padding-left:2em;
margin-left: 0px;
}
iframe#twitter-widget-0.twitter-timeline[style] {width:70px !important;}
div#iPhone iframe[id^="twitter-widget-0"] {min-width:170px !important;
margin-right: 20px;
}
/* iframe
======================================= */
.movie {
text-align: center;
width: 350px;
height: 345px;
margin-left: 0px;
margin-right: 200px;
}
.paragraph {
width: 50px;
margin-left: 10%;
}
.thumbnail {
color: #333;
margin-left: 100%;
width: 100%;
background-color: transparent;
border:0px;
}
.btn-primary {
color: #000;
background-color: #aff6b8;
border-color:black;
margin-top: 5%;
width:100%;
}
}
}
mobile style won't render unless I add a extra closing brace to the end
Yes, the #media syntax involves an extra set of braces:
#media only screen and (max-width: 766px) {
element {}
}
The last closing brace you added is equivalent to the last one in the code above.

Resizing container div when inner div position changes

I've got a container div (the background in the picture below) and an inner div that contains images (social icons).
I want my images to overflow out of the bounds of the container div (as you can see in the image), but at the same time I want the container to resize: its height should decrease when my images overlap its top border. So there shouldn't be that lower empty border: the container behaves like if the images were fixed, while they are not.
Here's the image:
How can I do that?
EDIT: This is what I'd like to obtain (well, something like this I mean :P )
The height of the container div (the dark background you see) is dynamically set by its content.
try giving the position of inner div to position:absolute in relative with the parent div
then you can play around with the inner divs by adjusting the top,left,bottom and right properties
// css
body{ background: url("http://1.bp.blogspot.com/-OowkzBiSOJU/Ud0G3T325lI/AAAAAAAACfY/syhVEMuuSOw/s1600/tiny_grid.png") repeat scroll 0 0 transparent; color: #666; height: 100%; padding: 0; font-family: 'Lora',Georgia,Serif; font-size: 18px; line-height: 29px; border-top: 5px solid #4690B3; }
.clr { clear:both; float:none; }
.ct-wrapper { padding:0px 20px; position:relative; max-width:1230px; margin: 0 auto; }
.header-wrapper {
background: #fff; border-bottom: 1px solid #ccc; display: inline-block; float: left; width: 100%; }
/***** Optin Form CSS *****/
.opt-in .inner { background: url("http://3.bp.blogspot.com/-YfUnP1wOFzQ/Ud0G21XXRWI/AAAAAAAACfQ/Hg5Gakd69tQ/s1600/home-bg.png") repeat scroll 0 0 transparent; padding: 10px 0 0; font-style: italic; color: #ccc; text-shadow: 0 1px 1px #000000; margin-top:50px;height:50px; }
.opt-in .opt-in-wrap { margin-right: 40%; }
.opt-in .info { float: left; width: 80%; }
/*****************************************
Responsive styles
******************************************/
#media screen and (max-width: 1024px) {
#header, .header-right { float: none; text-align: center; width: 100%; }
.header-right .widget-content { margin: 0; }
}
#media screen and (max-width: 960px) {
.ct-wrapper{ padding:0 15px; }
.main-wrapper, .opt-in .opt-in-wrap{ margin-right:0; width:100%; }
.sidebar-wrapper{ float: left; width: auto; margin-left: 20px; }
.nav-menu ul { text-align: center; }
.nav-menu ul li { float: none; }
.opt-in .inner .ct-wrapper { padding: 0 48px; }
.opt-in .info { text-align: center; }
.opt-in .signup-form { margin-top: 30px; width: 95%; float: left; }
#subbox { width: 60%; }
}
#media screen and (max-width: 768px){
#header p.description { margin: 0; }
.header-right { display: none; }
#comment-editor { margin:10px; }
.footer { width: 50%; }
}
#media screen and (max-width: 500px){
#header img { width:100%; }
.opt-in .inner .ct-wrapper { padding: 0 10px; }
}
#media screen and (max-width: 420px){
.comments .comments-content .datetime{ display:block; float:none; }
.comments .comments-content .comment-header { height:70px; }
}
#media screen and (max-width: 320px){
.footer { width: 100%; }
.ct-wrapper{ padding:0; }
.post-body img{ max-width: 220px; }
.comments .comments-content .comment-replies { margin-left: 0; }
}
/*****************************************
Hiding Header Date and Feed Links
******************************************/
h2.date-header{display:none;}
.opt-in .social-div {
background: rgba(0, 0, 0, 0.0);
border: none;
float: right;
font-size: 16px;
text-align: center;
position: absolute;
top: -55px;
}
.opt-in .social-div .form-inner { font-size: 16px; margin: 35px; }

Media Queries being read with wrong syntax

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.

Resources