I'm unfamiliar with #media queries, and what I'm trying to accomplish is a responsive removal/alteration of certain CSS when the browser viewing is shrunk below a certain resolution, or a mobile device viewing the page is also below that same specified resolution.
I need .side to remove float: left; position: fixed; width: 150px; when below 500px width resolution, and .main to remove border-left: 1px solid #000; margin: 0 0 0 170px;
.side {
display: block;
float: left;
overflow: hidden;
position: fixed;
width: 150px;
}
.main {
border-left: 1px solid #000;
margin: 0 0 0 170px;
}
Any help or explanation is appreciated.
In this way you can do this
#media only screen and (max-width: 500px) {
.side {
float: none;
position: static;
width: auto;
}
.main {
border-left:0;
margin: 0;
}
}
.side {
display: block;
float: left;
overflow: hidden;
position: fixed;
width: 150px;
}
.main {
border-left: 1px solid #000;
margin: 0 0 0 170px;
width: auto;
}
#media only screen and (max-device-width : 500px) {
.side {
float: none;
position: static;
width: auto;
}
.main {
border: 0;
margin: 0;
}
}
There is a pretty simple way to do it, just use all: unset, like this
#media ("your condition") {
.yourClass {
all:unset
}
}
Related
Im so new in CSS and trying to fix the following code..
I want a simple thing where the screen size is smaller than 400 change the image size..
it should work but it doesn't..
I tried to make
* {
box-sizing: border-box;
}
body, html {
background: #fff;
height: 100%;
margin: 10px;
}
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
}
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px;
}
}
Media queries at the top of the CSS need !important to over rule the media query. Media queries at the bottom do not need !important. I placed the query at the top so I used !important to over rule any other style after.
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px !important;
}
}
* {
box-sizing: border-box;
}
body, html {
background: #fff;
height: 100%;
margin: 10px;
}
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
}
I think this will work.
#media screen and (max-width: 500px) {
.left__img2 {
max-width: 10px;
}
}
Your code works well in the following example (resize your window), maybe it comes from a side effect of the rest of your code, can you show us the rest of your code?
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
background-color: red;
}
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px;
background-color: yellow;
}
<div class="left__img2"><div>
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'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; }
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%;
}
}
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.