I've got
.container {
width: 960px;
margin: 0 auto;
}
.bgcontainer {
width: 960px;
background-image:url(images/midbg.gif);
margin: 0 auto;
}
I need to attach 2 (background)images floating to the container. 2 Wings as you can see in the Image.
They should hide when there is no place like 1024 px.
put the background on your body.
http://codepen.io/anon/pen/fAsHa
You should use a media query. This should solve your problem!
#media screen and (max-width: 1024px) {
.bgcontainer {
background-image:none;
}
}
This will work for multiple styles, just make sure your updated styles are between the media query's {} brackets
Related
Here is a link to the codepen for the code that I am working on. I am trying to get it so that if the device width is less than 540px, the width of the wrapper goes from 33.33% to 100%, however it doesn't seem to be doing so.
My media query is as follows:
#media only screen and (max-width: 540px) {
#wrapper {
width: 100%;
}
}
My normal css for the wrapper is as follows:
#wrapper {
width: 33.3%;
margin: 0 auto;
position: relative;
}
You have to put that media query BELOW the other rules in the stylesheet. The way you have it now (i.e. media query at the beginning of your stylesheet) it's overwritten by the general rule (containing width: 33.3%;) which follows below it.
https://codepen.io/anon/pen/GyPRVG
I am making a webpage. I am the first to admit my CSS skills are not the best.
There is blank space appearing to the right side of the mobile version page. (www.perfectshinesmile.com)
Your container is not picking up margin:0 auto in mobile css.
So replace from main.css at line number 2638
#media only screen and (max-width: 641px)
.container {
max-width: 360px;
margin: 0 0;
}
to
#media only screen and (max-width: 641px)
.container {
max-width: 360px;
margin: 0 auto;
}
Hope this will help :)
your .container has set max-width property to 360px. Change it to max-width: none. But I reccomend you to your bootsrap grid for web layout, you would avoid such a problems. I can see in your code that a lot of elements has specific width value, resulting to broken layout on mobile devices.
In your case you have a second scroll bar!
or you do this
::-webkit-scrollbar {display:none !important;}
Or you do this
#media only screen and (max-width: 641px){
.section {
min-height: auto;
width: 360px;
overflow: visible;
}
}
Don't use the overflow:scroll; ever unless you need it! especially in phones port!
Be completely removed in the Media Query. How can I do so?
I have the following CSS:
#container {
width: 50%;
}
}
With media queries you can override the CSS when the device has a certain width.
So:
#container {
width: 50%;
}
#media screen and (max-width: 600px) {
#container {
width: auto;
}
}
But you can't delete a CSS rule, in fact every element has all the CSS values already setted by default and by the browser and you just override some of them, if you ispect an element and go under "computed" tab of the developer tools you can see all the CSS atributes.
Those are the CSS file used by the browser (called user agent stylesheet):
Firefox (Gecko): https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css.
Chrome/Safari (WebKit): http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Chrome (Blink): https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
Internet Explorer (Trident), older versions: http://www.iecss.com/
However you can reset to default a CSS value using value:initial; so width:initial; but if you know the CSS default value (whitch is visible there) you can specific it (In this case width:auto;).
Read this to know more about media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
the initial value of the width property is auto, which means that if you set the width to auto, it would be like no other width rule exists.
#container {
width: 50%;
}
#media screen and (max-width: 600px) {
#container {
width: auto;
}
}
Also, since it is better to write Mobile-first css, I would remove completely the #container selector and add the following media query
#media screen and (min-width: 601px) {
#container {
width: 50%;
}
}
You can use the value initial. More info about it here: CSS Initial/Inherit
#container {
width: 50%;
}
#media screen and (max-width: 600px) {
#container {
width: initial;
}
}
My understanding of your question is that you want to completely remove the width via media queries of your container correct? If so, simply add '0' to that ID for your width. If you prefer, you can put '0px' or '0%' but that really isn't needed. If this does not work, try adding '!important' to your media query like below.
#container {
width: 50%;
}
#media screen and (max-width: 600px) {
#container {
width: 0;
}
}
or
#container {
width: 50%;
}
#media screen and (max-width: 600px) {
#container {
width: 0 !important;
}
}
I've been working on this for over an hour so hoping someone can help me figure this out!
I'm trying to get these images centered within mobile view, however, can't seem to get it work.
I've tried a variety of custom css, however, I'm stuck...
#media only screen and (max-width: 900px){
.fusion-column-wrapper {
padding-left: 25px !important;
}}
Here's the page I'm trying to figure it out on.
http://blisspaperboutique.com
You need to set the wrapping anchor tag and img both to display: block. Also, set margin: 0 auto on the img.
#media only screen and (max-width: 900px){
.fusion-column-wrapper a {
display: block;
}
.fusion-column-wrapper a img {
display: block;
margin: 0 auto;
}
}
I have a website that is totally responsive however there is one part that is not ans is situated below the slogan URBAN FREE SPIRIT (I am talking about the images)
I tried to had the class container, the class img-responsive but nothing seems to work ..
Here is my website, it will be easier to have a look through the inspector I think than with copy paste
http://v1954132.caqoajqezbu9.demo42.volusion.com/
.home-stage-v2 isn't responsive.
.home-stage-v2 {
width: 1000px;
height: 1200px;
position: relative;
margin-top: 25px;
}
Apply media queries for it for the various widths.
#media (min-width: 1200px) {
.home-stage-v2 {
width: 1000px;
}
}
#media (max-width: 1199px) {
.home-stage-v2 {
width: 100%;
}
}
Example above. You will also have to rework the images as they're with fixed width and also don't respond to width changes. I'd suggest reworking them into either percentages or putting them into a grid.
http://getbootstrap.com/examples/grid/ for examples on grids.