I have a large section of code that has a number of differences depending on if the view is mobile or desktop. I'm trying to control which section of code displays with the code shown below. Here's my jsfiddle No matter how I adjust the widths, both div's appear. Is this possible or do I need to use javascript?
<style>
#media only screen and (max-width: 600px {
div.is-not-mobile {display:none;}
div.is-mobile {display:block;}
}
#media only screen and (min-width: 600px {
div.is-not-mobile {display:block;}
div.is-mobile {display:none;}
}
</style>
<div class="is-not-mobile">
<div>This is not a mobile view</div>
</div>
<div class="is-mobile">
<div>This is a mobile view</div>
</div>
You're missing closing parenthesis ) in (max-width: 600px) and (min-width: 600px).
<style>
#media only screen and (max-width: 600px) {
div.is-not-mobile {display:none;}
div.is-mobile {display:block;}
}
#media only screen and (min-width: 600px) {
div.is-not-mobile {display:block;}
div.is-mobile {display:none;}
}
</style>
<div class="is-not-mobile">
<div>This is not a mobile view</div>
</div>
<div class="is-mobile">
<div>This is a mobile view</div>
</div>
In the given code your missing (max-width: 600px parenthesis. the correct code will be (max-width: 600px)
Also, make sure you have meta tags in your head section
Best practice try to add your media queries from internal tag to external CSS file at the end of code.
Hope this will work. Happy Coding!
Related
I use a div like this..
<div id="book" class="justify-content-center text-center">
This is fine for desktops, but when on mobile device I need to align text to the left instead. What do I need to add in my media query so that text is left aligned instead when on mobile device?
#media only screen and (max-width: 480px) {
// What do I add here to "override" the text-center so that it align to left instead?
}
Solution:
Do not overwrite the bootstrap classes justify-content-center text-center. Overwrite the unique ID book only.
#media only screen and (max-width: 480px) {
#book{
float:left;
}
}
<div id="book" class="justify-content-center text-center">
Test Text
</div>
See this :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
#media (max-width: 575.98px) {
.text-center {
text-align: left !important
}
}
#media (min-width: 576px) and (max-width: 767.98px) {
.text-center {
text-align: left !important
}
}
#media (min-width: 768px) and (max-width: 991.98px) {
.text-center {
text-align: left !important
}
}
</style>
<div id="book" class="justify-content-center text-center">test</div>
This code generates the output you expect.
You should note that these CSSs are placed after the bootstrap tag.
result for big screen :
result for small screen :
If you're using Bootstrap SASS, combining 2 Bootstrap classes to make a new class that does your job might be a better option. Consider the following:
.text-sm-left-md-right { // Give whatever name you want
#extend .text-start; // or text-left if B4
#extend .text-md-end; // or text-right if B4.
}
The above will have a text aligned left in small screens and then right from medium and above. This way you don't have to put the ID of an element here, and can reuse the class however many times you want.
Just add the css right away
#media only screen and (max-width: 480px) {
.text-center {
text-align: left !important;
}
}
But you must import the CSS AFTER the bootstrap, or the bootstrap will override your CSS, instead of you override it. But there are other solution
write
class="text-left text-sm-center"
this mean on sm screen width, center the CSS, and left below sm
https://getbootstrap.com/docs/4.0/utilities/text/
I had created a personalized CSS class. I would like to know how I can use this class only in one screen (for example sm) and not in others. I use bootstrap. My class has the property font-size 2.9vw and it is perfect to sm screens but it is so big to md or lg screens. I don't want to use media querys because it is a bootstrap task.
Can I use xs,md,lg... with my own class in bootstrap? What can I do to resolve it please?
You can sync your class with bootsrap 4 grid. Use some of this with your class
.your-class {font-size 2.9vw}
#media (min-width: 576px) {
/*sm equivalent*/
/*put your class here*/
}
#media (min-width: 768px) {
/*md equivalent*/
/*put your class here*/
}
#media (min-width: 992px) {
/*lg equivalent*/
/*put your class here*/
.your-class {font-size 1.9vw}
}
#media (min-width: 1200px) {
/*xl equivalent*/
/*put your class here*/
}
UPDATED
For Bootstrap-only-no-media solution you will have to clone your element with the same content like
<style>
.my-class-1 {font-size 2.9vw}
.my-class-2 {font-size 1.9vw}
</style>
<!-- Visible only on xl -->
<div class="my-class-1 d-none d-xl-block">My text</div>
<!-- Hidden only on xl -->
<div class="my-class-2 d-xl-none">My text</div>
More about bootstrap 4 display. But using media is more attractive way.
I have, on a Prestashop store, a copyright paragraph that I want to dispaly on a single row for large displays and with a linebreak for smaller ones (ie. mobile).
I have created two distinct ids for two versions of the copyright text like this:
#media (max-width: 719px) {#poweredby {display: none;}}
#media (min-width: 720px) {#poweredby {text-align: center;margin: -10px 0 -13px 0;display: block;}}
#media (max-width: 719px) {#poweredby-mob {display: block;}}
#media (min-width: 720px) {#poweredby-mob {display: none!important;}}
<div id="poweredby" class="col-md-12 col-xs-12">
COPY 1 - Single line
</div>
<div id="poweredby-mob" class="col-md-12 col-xs-12">
COPY 2 - Two lines
</div>
The result though is strange:
on mobile displays only the "poweredby-mob" div is visible, like it should, but on larger ones they BOTH appear, "poweredby-mob" not getting the display:none attribute even if I added !important to it.
Any ideas why this simple media query isn't working?
Media queries can be picky about how you structure them. Try this.
#media (max-width: 719px) {
#poweredby {display: none;}
#poweredby-mob {display: block;}
}
#media (min-width: 720px) {
#poweredby {text-align: center;margin: -10px 0 -13px 0;display: block;}
#poweredby-mob {display: none!important;}
}
Another thing that can help is to choose a "default", whether that be mobile or non-mobile and set those style outside of any media queries. Then use media queries only to override when needed. That reduces the potential for human error.
I have some onMouseOver functions that don't work particularly well on mobile devices. Would it be possible for me to have a different DIV displayed on mobile devices?
Here's a late response to your suggestions. Basically, I want a separate DIV (without the onMouseOver) if the display is mobile.
<!-- services -->
<section class="services" id="services">
<div class="container ptb">
<div class="row">
<h2 class="centered mb"><b>SERVICES</b></h2>
</div> <!-- Services Headline -->
<img src="assets/img/services-flip.png" height="50%" width="50%"
onMouseOver="this.src='assets/img/services-list.png'"
onMouseOut="this.src='assets/img/services-flip.png'" />
</div> <!-- Content, Image -->
</section>
<!-- end services -->
Media queries are your friend.
Example:
#media screen and (max-width: 768px) {
div.mobile { display: block; }
div.desktop { display: none; }
}
Aside from Media Queries, you can also use something like: http://detectmobilebrowsers.com/
Essentially you can include a script like this, and do something like this:
$(document).ready(function(){
if(jQuery.browser.mobile) {
$('body').addClass('mobile');
}
});
And based on the body class "mobile", hide / display the necessary divs. (this is the jQuery example, but you can do it using plain JS as well)
Sure you can .
Use css's CSS Media Queries
Here is a great reference for apple products screen sizes.
http://stephen.io/mediaqueries/#iPhone
div{
width: 100%;
height:100%;
padding: 0;
margin:0;
left:0;
left:0;
}
#desktopView{
background:rgb(50,50,80);
display:block;
}
#mobileView{
background:rgb(50,80,50);
display:none;
}
#mobileLandscapeView{
display:none;
background:rgb(80,50,50);
}
/* iPhone 6 in portrait & landscape */
#media only screen and (min-device-width : 375px) and (max-device-width : 667px){
/* where you can hide unwanted DIV and show a special MOBILE DIV if desired */
#desktopView{
background:rgb(50,50,80);
display:none;
}
#mobileView{
background:rgb(50,80,50);
display:block;
}
#mobileLandscapeView{
background:rgb(80,50,50);
display:none;
}
}
/* iPhone 6 in landscape */
#media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) {
/* where you can hide unwanted DIV and show a special MOBILE DIV if desired */
#desktopView{
display:none;
}
#mobileView{
display:none;
}
#mobileLandscapeView{
display:block;
}
}
<div id="desktopView">Should see in desktop mode</div>
<div id="mobileView">Should see in iPhone 6 vertical mode</div>
<div id="mobileLandscapeView">Should see in iPhone 6 landscape mode</div>
I have a css code like this:
#charset "utf-8";
/* long code just an example of top */
.show_hide_top a.showLink { /* small red link */
left: 39% !important;
padding-left: 8px;
top: 15% ;
}
#media only screen and (min-width: 1300px) and (max-width:1500px) {
/* long code for these devices ex: */
.show_hide_top a.showLink {
left: 39% !important;
padding-left: 8px;
top: 18% ;
}
}
#media only screen and (min-width: 769px) and (max-width:1299px) {
code for these devices
}
#media only screen and (min-width:481px) and (max-width: 768px) {
code for these devices
}
However, my computer (1600) picks up the media code for the 1300-1500.
Something (probably silly) is wrong.
Thank you so much for your opinion.
Media queries like this don't target devices, they target the width of the browser viewport in pixels. #media only screen and (min-width: 1300px) and (max-width:1500px) was being picked up because your browser's viewport was in between 1300 pixels wide and 1500 pixels wide.
To demonstrate this idea better, try resizing your browser window and watch the different media queries being applied and removed.
When I was using media query, firefox was not recognizing a generic id like #upper.
Example:
<div id="container">
<div id='left"> content here </div>
<div id="center">
<div id="upper"> content here </div>
...
</div>
<div id="right">content here </div>
</div>
As soon as target #center #upper in the CSS, the media query worked ONLY for the target media and not as a generic rule.
Only #upper? Nope... It was reading and applying the media query for all devices, overwriting the generic CSS.
At first, toggling between min-devide-width and min-width seemed to work, but the problem persisted. So this is the permanent fix.
Make sure to use both full path in the generic CSS and in the media query.