I created this website and i have a problem with the mobile site. Which it does not fit to the content. How do i need to fix this? i have attached the css of the responsive below.
I have tried several codes. But it does not fit to the content. The website is smaller than the device. And making the width 100% did not work.
Thanks in Advance
#media only screen and (max-width: 600px) {
.content-area {
float: center;
width: 100%;
}
.social-navigation li a::before,
.sidebar-toggle {
font-size: 16px;
}
.sidebar-toggle {
height: 46px;
}
.site-title {
font-size: 32px !important;
}
}
#media only screen and (max-width: 500px) {
.content-area {
padding: 0;
width: 100%;
}
.container {
width: 100%;
}
.site-logo {
width: 50px;
text-align: left;
}
.site-title,
.entry-title {
padding-top:20px;
font-size: 18px !important;
}
.site-description {
margin-top: 0;
font-size: 16px !important;
}
}
Related
.row {
margin-bottom: 0px;
}
is not being applied but when I remove the second media query it is?
Design was desktop by default and now trying to implement mobile and tablet.
body {
background-image: url('../images/iStock-527528428 Cropped.jpg');
background-repeat: no-repeat;
background-position: center top;
/*background-attachment: fixed;*/
color: white;
}
.container {
width: 37%;
background-color: black;
background: rgba(0, 0, 0, 0.67);
border-radius: 17px;
padding: 17px;
position: relative;
top: 37px;
}
#media screen and (max-width: 600px) {
.container {
width: 85%;
top: 24px;
}
body {
background-position: left top;
}
}
#media screen and (min-width: 601px) and (max-width: 992px) {
.container {
width: 55%;
top: 24px;
}
}
.row {
margin-bottom: 0px;
}
html {
font-family: 'Nunito', sans-serif;
}
By default bootstrap has no margin at bottom of .row class.
This is my first responsive site. I am happy with it however there is one very annoying aspect that has completely stumped me. The original site is www.elitemarquees.com.au I have changed the home page to:
http://elitemarquees.com.au/test/index.html
The issue is; when I make the browser smaller everything moves and behaves as I intended it except for the menu (#headNav) at one point. It jumps down into the main content (#content) and sits below the second line of body text. Then when you go smaller it rectifies its self and jumps back in between the logo (#headLogo) and the main body text. Here is how I have initially set up the div sections:
//this section contains two divs headLogo and headNav
#header {
height: 180px;
}
#headLogo {
width: 250px;
float: left;
}
#headNav {
width: 600px;
float: right;
margin-top: 70px;
padding-right: 40px
}
#content {
width: 500px;
float: right;
padding-right: 140px
}
The I do this which is where I believe the bad behaviour occurs:
/* for 700px or less */
#media screen and (max-width: 700px) {
#headNav {
width: auto;
float: none;
}
#headLogo {
width: auto;
float: none;
}
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
It rectifies its self when this is fired:
/* for 480px or less */
#media screen and (max-width: 480px) {
#header {
height: auto;
}
#headNav {
padding-right: 0px;
margin-top: 0px;
}
h1 {
font-size: 24px;
}
#content {
padding-right: 10px
}
}
Thank you for any help
Here
/* for 700px or less */
#media screen and (max-width: 700px) {
#headNav {
width: auto;
float: none;
}
#headLogo {
width: auto;
float: none;
}
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
You should add this :
#header{
height: auto;
}
My site, like many others, utilizes bootstrap's carousel on the home page.
For some reason, despite the carousel-control appearing and everything else looking fine, the data slide functionality stops working on monitor sizes less than 480px (so, any mobile device).
Is there a snippet of code I need to add to the #media(max-width:480px) section in the CSS? As it stands I don't have any carousel/responsive related code under that size, but just the following:
#media (max-width: 979px) {
.carousel .item {
height: 500px;
}
.carousel img {
width: auto;
height: 500px;
}
}
#media (max-width: 767px) {
.carousel {
margin-left: -20px;
margin-right: -20px;
}
.carousel .container {}
.carousel .item {
height: 300px;
}
.carousel img {
height: 300px;
}
.carousel-caption {
width: 65%;
padding: 0 70px;
margin-top: 100px;
}
.carousel-caption h1 {
font-size: 30px;
}
.carousel-caption .lead, .carousel-caption .btn {
font-size: 18px;
}
}
An example can be seen here.
Add a z-index on you carousel-control:
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
position: absolute;
top: 40%;
left: 15px;
color: #fff;
z-index: 99999; /*Add This */
}
What this is doing it just making this control be in front of the slider that is more than the actual screen size.
I'd like to make my gallery http://wordpress.org/extend/plugins/photospace-responsive/ be responsive with a vertical layout changing into a horizontal one when the browser is scaled down for mobile.
Please can you tell me how I can make it revert when the screen size is smaller to the gallery being on top?
See my test page
http://brightmist.co.uk/gallery/
I've even tried media queries
.photospace_res .gal_content {
float: left;
width: 80%;
}
.photospace_res .thumbs_wrap2 {
float: left;
min-height: 800px;
width: 20%;
}
#media all and (max-device-width: 480px) {
.photospace_res .gal_content {
float: none;
width: 100%;
}
.photospace_res .thumbs_wrap2 {
float: none;
min-height: 0;
width: 100%;
}
}
Thanks for your help
Judi
Yay I fixed it and added a few extra styles
.photospace_res .gal_content {
float: left;
width: 80%;
}
.photospace_res .thumbs_wrap2 {
float: left;
width: 20%;
}
.photospace_res {
margin: 0;
}
.photospace_res .ss-controls {
border: 1px solid #CCCCCC;
margin-bottom: 20px;
padding: 5px 10px;
}
#media screen and (max-width: 700px) {
.photospace_res .gal_content {
float: none;
width: 100%;
}
.photospace_res .thumbs_wrap2 {
float: none;
min-height: 0;
width: 100%;
}
}
I'm wondering why some of my media queries are not overriding the native styles at the view port their being called. I'm trying to restyle a menu responsively, to stack, and have the navigation area's height longer in a WP theme. But every which way I add the specs I create to get this effect via editing Live CSS in Safari or FF inspect element - the styles I insert under the specific viewport I'm targeting are not being read. I know I'm using media queries correctly as it reads NEW styles, just doesn't override native? I'm missing something here? Here's what I'm trying to add that won't read.
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
#access li {
float: none; // To translate to not to float to the left stack
position: relative;
}
#access {
background: url("http://testsite.com/wp-content/uploads/2012/01/menu_bg.gif") repeat scroll 0 0 transparent;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
clear: both;
display: block;
float: left;
height: 240px; //Changed the height to allow stack
width: 100%;
}
Edit: Here's the FULL set of Responsive styles I'm calling, if matters.
/* =Responsive Structure
----------------------------------------------- */
#media (max-width: 800px) {
body {
padding: 0;
}
#page {
margin-top: 0; overflow: hidden;
}
#branding {
border-top: none;
}
#signup { display:none; }
#adbox { display:none; }
#adbox2 { display:none; }
#socialpost { margin-left: -100px; }
p {font-size: 12px; }
#sublogo { display: none; }
#footcontain { padding-left: 0;}
#access a {
color: #000000;
display: block;
font-family: arial;
line-height: 3.11em;
padding: 0 20px;
text-decoration: none;
#access a { font-size: 12px; }
#access li {
float: left;
margin-left: -28px;
position: relative; }
}
#media (max-width: 650px) {
/* #media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */
body {
padding: 0;
}
#page {
margin-top: 0;
}
#branding {
border-top: none;
}
#signup { display:none; }
#adbox { display:none; }
#adbox2 { display:none; }
p {font-size: 12px; }
#sublogo { display: none; }
#access a {
color: #000000;
display: block;
font-family: arial;
line-height: 3.11em;
padding: 0 13px;
text-decoration: none;
font-size: 11px;}
#footcontain { padding-left: 0;}
#access a {
padding: 0 15px; }
}
#media (max-width: 450px) {
#content .gallery-columns-2 .gallery-item {
width: 45%;
padding-right: 4%;
}
#content .gallery-columns-2 .gallery-item img {
width: 100%;
height: auto;
}
#signup { display:none; }
#adbox { display:none; }
#adbox2 { display:none; }
p {font-size: 10px; }
.entry-content, .entry-summary {
padding: 1.625em 0 0;
width: 48%; }
#footcontain { padding-left: 0;}
#branding #s {
-moz-transition-duration: 400ms;
-moz-transition-property: width, background;
-moz-transition-timing-function: ease;
float: right;
height: 35px;
width: 47px; }
.widget-title { margin-top: 35px; }
.flexslider .slides img {
border: 0 none;
display: block;
max-width: 100%;
padding-bottom: 25px; }
#footcontain { display:none;}
#access li {
float: none;
position: relative;
}
#access {
height: 70px;
}
#access a {
color: #000000;
display: block;
font-family: arial;
font-weight: bolder;
line-height: 3.11em;
padding: 0 10px;
text-decoration: none;
}
#access ul {
font-size: 10px;
list-style: none outside none;
margin: 0 0 0 -80px;
padding-left: 0;
}
.flex-control-nav { display: none; }
.flexslider {
margin: 0 0 67px; }
.flex-caption { display: none; } //Could Display this here, need to make take half of slider
}
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
body { padding: 0; }
#access {
height: 70px;
}
#page {
margin-top: 0; overflow: hidden;
}
#branding {
border-top: none;
}
#signup { display:none; }
#adbox { display:none; }
#adbox2 { display:none; }
p {font-size: 10px; }
#sublogo { display: none; }
#access a { padding: 0 10px; }
#access li {
float: none;
position: relative;
}
.entry-content, .entry-summary {
padding: 1.625em 0 0;
width: 35%; }
#footcontain { display: none; }
#branding #s {
-moz-transition-duration: 400ms;
-moz-transition-property: width, background;
-moz-transition-timing-function: ease;
float: right;
height: 35px;
width: 47px; }
#footcontain { display: none; }
.widget-title { margin-top: 35px; } //Attempt to Create Space for Slider Page Nation
#access { height: 70px; }
#access li {
float: none;
position: relative;
}
.flex-control-nav { display: none; }
.flex-caption { display: none; } //Could Display this here, need to make take half of slider, check
.flexslider {
margin: 0 0 67px; }
}
The CSS code from your post is not working because it's a device-specific style and you are viewing it on a Safari, Chrome or Firefox using a laptop/desktop. You are forgetting that Media Queries are giving you the possibility to apply different styles when a page is being displayed in a 'browser' - resized to 480px and on an iPhone (which has a max-device-width of 480px).
Example CSS:
/* max-width */
#media screen and (max-width: 480px) {
.one {
background: #F9C;
}
}
/* min-width & max-width */
#media screen and (min-width: 480px) and (max-width: 900px) {
.two {
background: #9CF;
}
}
/* min-width */
#media screen and (min-width: 900px) {
.three {
background: #F90;
}
}
/* iphone specific css */
#media screen and (max-device-width: 480px) {
.iphone {
background: #ccc;
}
}
In the example above you can target both and still have a separate style for your device of choice. If you want to test it in a browser just use the min-width or max-width properties.
Hope this helps.
On the top example there's a missing closing bracket.
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
#access li {
float: none; // To translate to not to float to the left stack
position: relative;
}
#access {
background: url("http://testsite.com/wp-content/uploads/2012/01/menu_bg.gif") repeat scroll 0 0 transparent;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
clear: both;
display: block;
float: left;
height: 240px; //Changed the height to allow stack
width: 100%;
}
}