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/
Related
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!
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 the following markup, and I need to set two different background images at different breakpoints.
<body>
<main>
<div class="intro" style="background-image: url(https://s3.amazonaws.com/my_mobile_image);"></div>
<section>
....
</section>
<section>
....
</section>
</main>
</body>
I can only set the background image in the style attribute in the HTML markup. How can I render a background image suitable for mobile and a different image that is suitable for desktop?
Should I have two different divs like this setting intro-mobile to display none on a desktop breakpoint and setting intro-desktop to display none on a mobile breakpoint?
<div class="intro intro-mobile" style="background-image: url(https://s3.amazonaws.com/my_mobile_image);"></div>
<div class="intro intro-desktop" style="background-image: url(https://s3.amazonaws.com/my_desktop_image);"></div>
You could use the CSS media queries.
For example (assuming you want to show mobile background on screens < 768px wide).
.intro {
background-image: url(https://s3.amazonaws.com/my_mobile_image);
}
#media screen and (min-width: 768px) {
.intro {
background-image: url(https://s3.amazonaws.com/my_desktop_image);
}
}
Or if you need to have it inside of the style attribute, you could use media queries to hide the other div.
.intro-desktop {
display: none;
}
#media screen and (min-width: 768px) {
.intro-desktop {
display: block;
}
.intro-mobile {
display: none;
}
}
Also, if you can include a <style> inside of the markup, you could just do:
<style>
.intro {
background-image: url(https://s3.amazonaws.com/my_mobile_image);
}
#media screen and (min-width: 768px) {
.intro {
background-image: url(https://s3.amazonaws.com/my_desktop_image);
}
}
</style>
my website use bootstrap 4 and a css file i made.
in the bottom of this css file, i put some media queries:
#media (max-width: 575px) {
.address .contact {
text-align: center;
}
}
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) { }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) { }
#media screen and (min-width:768px) and (max-width:992px){
.left{
margin-left: 0;
width: 100%;
}
.picto{
width: 40%;
}
}
And here is a part of code:
<section id="section_address" class="container">
<div class="row">
<div class="col-12 col-sm-6">
<div class="address">
<h5>ADDRESS</h5>
1 street,<br>
75000, PARIS
</div>
</div>
<div class="col-12 col-sm-6">
<div class="contact">
<h5>MYCOMPANY</h5>
01 11 22 33 44<br>
contact#mycompany.com<br>
http://mycompany.com
</div>
</div>
</div>
</section>
But my media queries are not working, except when i add !important to each line. But i can't do that for each line and i already use media queries and i never had to do that.
Bootstrap css file should be referenced before your custom css file in your html page. If not bootstrap css will Cascade or overwrite your rules.
Make sure your custom CSS added after all other CSS. Because your custom CSS should be added after all other CSS files. whereby your custom CSS will override other CSS.
Because CSS applies "top to bottom".
Thank you!!!
Most likely, the elements to which you applied your own CSS classes also have Bootstrap classes applied to them (like .row, column, col-12 and many others), and the Bootstrap CSS rules (especially those which combine several classes) have a higher specifity, which overrules your own classes.
To get the result you want, use the browser tools / inspector on those elements and look which CSS class / CSS rule / selector is applied. Then create a rule which uses the same selector (combination of classes) PLUS your own class, which will result in a higher specifity and therefore overrule the original Bootstrap rule.
Firstly, avoid using !important unless you absolutely have to, it's a maintenance hazard.
Instead, look at how you could make your rules more specific than the bootstrap ones. Inspect the DOM and look at the problematic rules, then update your selectors with reference to the specificity rules so that they take precedence.
Regarding your newly-added code:
#media (max-width: 575px) {
.address .contact {
text-align: center;
}
}
This selects for all .contact class elements as descendants of `.address' elements. This hierarchy isn't present in the pasted code.
If you want to select them both then you need a comma:
#media (max-width: 575px) {
.address, .contact {
text-align: center;
}
}
If that isn't specific enough then this almost certainly will be:
#media (max-width: 575px) {
#section_address .address, #section_address .contact {
text-align: center;
}
}
Other than that, I can't see .left or .picto anywhere.
I want to use the full width on xs and sm devices (container-fluid) but just the container class for all other devices
What's the best way to put this in place?
I've tried jasnys bootstrap which has a container-smooth class but it doesn't centre the content when the screen gets over a certain size...
Overwrite the container class in your CSS and your done:
/* XS styling */
#media (max-width: #screen-xs-max) {
.container {
width: inherit;
}
}
/* SM styling */
#media (min-width: #screen-sm-min) and (max-width: #screen-sm-max) {
.container {
width: inherit;
}
}
Just replace the Less variables with your corresponding px-values.
Or you can do sth like this, and it works too:
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575.98px) {
.container {
min-width: 100%;
}
}
For bootstrap 4.4 & onwards
You can specify different container classes based on the device resolution. please have a look at the below example.
<div class="container-sm">
/* Do your stuff here */
</div>
For more customization
Reference: https://getbootstrap.com/docs/4.4/layout/overview/#containers
you can add a copy of the same container and configure it visible only in the sizes you want with the classes hidden-xx and visible-xx like this:
<div class="container-fluid hidden-md hidden-lg">
your content here
</div>
and this for the normal container:
<div class="container hidden-xs hidden-sm">
your content here
</div>