i want to change the max-width to the div only in mobiles
.test{
max-width: -webkit-100px;
}
<div class="test">test</div>
If webkit doesn't work, how can I put a max width for mobile?
Thanks!!
I'd say, simply by using max-width without any prefix, but using a media query
.test {
border: 1px solid #ddd;
}
#media (max-width: 600px) {
.test {
max-width: 100px;
}
}
<div class="test">test</div>
see also https://caniuse.com/?search=max-width
Related
I'm currently trying to make a website more responsive, and that via media queries. However, for some reason I can't get my classes to at all apply inside my media queries (or at least, that's what it seems like?).
I'm not sure if I'm doing something wrong, overlooking something, or if it's simply a sign on that I should take a break. Either way, the CSS looks as following:
#media (max-width: 760px) {
font-size: 56px;
:not(.aboutUs_extra_margin) {
margin-top: 190px !important;
}
}
I believe that you are missing a class that's supposed to be wrapping the styling. The styling will be applied to the class that you wrapped around the styling. Your code is supposed to look like this:
#media (max-width: 760px) {
.className{
font-size: 56px;
}
:not(.aboutUs_extra_margin) {
margin-top: 190px !important;
}
}
If you want all your classes to apply this styling you can add body instead. Body is the parent element of all classes.
#media (max-width: 760px) {
body{
font-size: 56px;
}
:not(.aboutUs_extra_margin) {
margin-top: 190px !important;
}
}
Update:
Based on the comments below I have made a fiddle containing the media queries. One inside a parent element and one outside it.
https://jsfiddle.net/rhbsqj6z/4/
The only styling that applies is from this code:
#media (max-width: 760px) {
body{
background:green;
}
:not(.aboutUs_extra_margin) {
border:1px solid red;
}
}
While you'd expect the styling below it to apply, since CSS looks at the last defined styling. Also if you would comment out the first media query, you can see that the one below will still not work:
.parent{
#media (max-width: 760px) {
body{
background:red;
}
:not(.aboutUs_extra_margin) {
border:1px solid blue;
}
}
The media queries inside a parent class are not working.
I saw someone use this in code and was wondering how this will work. I've seen min-width and max-width but never this. Does this mean only run when width is less than 460px, making the 768px max-width parameter irrelevant?
#media (max-width: 768px) and (max-width: 460px) {
CSS goes here
}
It's not a special thing, it will take the smallest max width
https://jsfiddle.net/
.dog {
background: green;
height: 200px;
width: 200px
}
.width {
height: 30px;
background: blue;
width: 460px;
}
#media (max-width: 460px) and (max-width: 768px) {
.dog {
background: red;
}
}
<div class="width" width="460px">
</div>
<div class="dog">
</div>
I'm trying to utilize max-width on a button with a margin-left and margin-right set to 28px.
When my site is shrunk down for mobile, this button still retains its margins and carries over off-screen. How can I fix this?
Here's my CSS for the button:
.button {
border: 1px solid;
border-color: #5094CF;
background: #FFFFFF;
width: 450px;
max-width: 100%;
height: 48px;
margin: 0 28px 0 28px;
}
You need mediaqueries for all resolutions you need, for example:
#media (max-width: 600px) {
.box {
margin: 0;
}
}
#media (max-width: 400px) {
.box {
margin: 10px;
}
}
Different margins depending on the resolution of the client.
Good luck
There's a pleasantly easy fix for your issue, try this:
#media all and (max-width: 658px) { // for mobile devices
.button{
// your preferred styling properties for displaying in mobile devices
}
}
I'm currently playing with bootstraps v2.3.2. media querys (I'm not using bootstraps grid, just those 4 media queries) to test them on mobile and tablet devices, and I notice that I keep getting a horizontal scrollbar and I don't understand why?
Basically I have one div and this CSS:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
margin:0;
/* height: 3000px; */ /* forced vertical scrollbar */
height: 300px;
}
div{
padding: 0 10px;
margin: 0 auto;
background: aqua;
width: 980px;
border: 1px solid black;
height: 100%;
}
/* Large desktop */
#media (min-width: 1200px) {
div{
background: red;
width: 1200px;
}
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
div{
background: yellow;
width: 768px;
}
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
div{
background: blue;
width: 100%;
}
}
/* Landscape phones and down */
#media (max-width: 480px) {
div{
background: green;
}
}
Situation when I force vertical scrollbar: JSBin
But when I don't force vertical scrollbar, I get the wanted result: JSBin
So it's obviously due the vertical scrollbar. I found this article about scrollbar issue in Responsive Web Design, but I get the same result in both Chrome and FF.
Update: as looking the source of bootstrap v3.3.2 I've noticed that they have new media queries, however, they don't use the minimal possible width for the .container. This are their media queries:
#media (min-width: 768px) {
.container {
width: 750px; /* 18px difference */
}
}
#media (min-width: 992px) {
.container {
width: 970px; /* 22px difference */
}
}
#media (min-width: 1200px) {
.container {
width: 1170px; /* 30px difference */
}
}
And here's the JSBin. Even when I forced the vertical scrollbar to appear, this won't trigger the horizontal scrollbar.
But if I want to use the minimal possible width for the media queries, like:
#media (min-width: 768px) {
.container {
width: 768px;
}
}
#media (min-width: 992px) {
.container {
width: 992px;
}
}
#media (min-width: 1200px) {
.container {
width: 1200px;
}
}
This will trigger the horizontal scrollbar - JSBin
Did the guys from bootstrap did that on purpose, because of the possibly that there can be the presence of vertical scrollbar?
Question: Why can't I use the minimal possible width in the media query when the vertical scrollbar is present?
I know that this may be a novice question, but I would appreciate if someone clarify this for me.
Bootstrap Media Querys
Setting media query
Bootstrap supports four media sizes:
Phones < 768px (8 inch)
Tablets ≥ 768px
Desktops ≥ 992px (10.33 inch)
Desktops ≥ 1200px (12.5 inch)
These are not fixed sizes!
If you have a screen that has a min-width of 768px the media query should trigger.
However setting a container to 768px will almost allways make that screen overflow
First of all the body element of all modern browser does have a margin to it.
example: Webkit browsers: body {margin: 8px;} so if your element of 768px and a margin-top of 8 and margin-bottom of 8 you get: 784px
so your screen is 768px (or less) and your content is 784px this will make it overflow (as it should). That said bootstrap sets: body {margin:0;}
An other example would be border. Border adds size to your element unless box-sizing isn't default. While outline sets the border inside your element.
Did the guys from bootstrap did that on purpose, because of the possibily that there can be the presence of vertical scrollbar ?
There is a possibility of that but i would think they set it because there is a bunch of css property's that affect size, so they gave a margin of error so to speak to avoid strange behavior like a horizontal scroll bar popping up.
Question: Why can't I use the minimal possible width in the media query when the vertical scrollbar is present?
You can use it: Fiddle!
Just Remember that some browsers will render it with a certain width.
Checkout the fiddle
https://jsfiddle.net/YameenYasin/as4Lmgas/1/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
margin: 0;
}
div {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
background: blue;
height:auto;
min-height:300px; // For testing purpose only
}
#media (min-width: 768px) {
div {
width: 750px;
background: silver;
}
}
#media (min-width: 992px) {
div {
width: 970px;
background: yellow;
}
}
#media (min-width: 1200px) {
div {
width: 1170px;
background: red;
}
}
<div></div>
I'm creating a fluid layout for a site. I'm trying to hide the contents of a <div> or the whole <div> itself in the mobile view, but not the tablet and desktop view.
Here's what I've got so far...
#title_message {
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
I have the display set to 'none' for the mobile layout and set as block on the tablet/desktop layouts... Is there an easier way to do that, or is that it?
You will need two things. The first is #media screen to activate the specific code at a certain screen size, used for responsive design. The second is the use of the visibility: hidden attribute. Once the browser/screen reaches 600pixels then #title_message will become hidden.
#media screen and (max-width: 600px) {
#title_message {
visibility: hidden;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
}
if you are using another CSS for mobile then just add the visibility: hidden; to #title_message.
Set the display property to none as the default, then use a media query to apply the desired styles to the div when the browser reaches a certain width. Replace 768px in the media query with whatever the minimum px value is where your div should be visible.
#title_message {
display: none;
}
#media screen and (min-width: 768px) {
#title_message {
clear: both;
display: block;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
}
}
The solution given didn't work for me on the desktop, it just showed both divs, although the mobile only showed the mobile div. So I did a little search and found the min-width option. I updated my code to the following and it works fine now :)
CSS:
#media all and (min-width: 480px) {
.deskContent {display:block;}
.phoneContent {display:none;}
}
#media all and (max-width: 479px) {
.deskContent {display:none;}
.phoneContent {display:block;}
}
HTML:
<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) { #title_message { display: none; }}
This would be for a responsive design with a single page for an iphone screen specifically. Are you actually routing to a different mobile page?
You can be guided by this example. On your css file:
.deskContent {
background-image: url(../img/big-pic.png);
width: 100%;
height: 400px;
background-repeat: no-repeat;
background-size: contain;
}
.phoneContent {
background-image: url(../img/small-pic.png);
width: 100%;
height: 100px;
background-repeat: no-repeat;
background-size: contain;
}
#media all and (max-width: 959px) {
.deskContent {display:block;}
.phoneContent {display:none;}
}
#media all and (max-width: 479px) {
.deskContent {display:none;}
.phoneContent {display:block;}
}
On your html file:
<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>
i just switched positions and worked for me (showing only mobile )
<style>
.MobileContent {
display: none;
text-align:center;
}
#media screen and (max-width: 768px) {
.MobileContent {
display:block;
}
}
</style>
<div class="MobileContent"> Something </div>
Well, I think that there are simple solutions than mentioned here on this page! first of all, let's make an example:
You have 1 DIV and want to hide thas DIV on Desktop and show on Mobile (or vice versa). So, let's presume that the DIV position placed in the Head section and named as header_div.
The global code in your CSS file will be: (for the same DIV):
.header_div {
display: none;
}
#media all and (max-width: 768px){
.header_div {
display: block;
}
}
So simple and no need to make 2 div's one for desktop and the other for mobile.
Hope this helps.
Thank you.
try this
#media handheld{
#title_message { display: none; }
}