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>
Related
This question already has answers here:
CSS media queries - Order matters?
(3 answers)
Closed 8 months ago.
I'm building a different view for mobile and desktop, and have problem with the limit of 500px.
When the screen has exactly a 500px width, my screen doesn't show not mobile nor desktop view.
.desktop-view{
background-color: blue;
color : yellow
}
.mobile-view{
background-color: yellow;
color : blue;
}
#media (min-width: 500px) {
section.mobile-view{
display: none;
}
}
#media (max-width: 500px) {
section.desktop-view{
display: none;
}
}
<div>
<section class="desktop-view">
This is the desktop view
</section>
<section class="mobile-view">
This is the mobile view
</section>
</div>
If I change one 500px by 501px, I have both lines. I feel I tried all hacky combination without success.
At exactly 500px, both of your media are triggered so none of your views are shown. You could display:none your desktop view by default and set it as block if the screen is larger than 500px.
/* everything, or mobile only if overridden in media queries */
.mobile-view{
background-color: yellow;
color : blue;
}
section.desktop-view{
display: none;
}
/* desktop */
#media (min-width: 500px) {
section.mobile-view{
display: none;
}
section.desktop-view{
display: block;
background-color: blue;
color : yellow
}
}
<div>
<section class="desktop-view">
This is the desktop view
</section>
<section class="mobile-view">
This is the mobile view
</section>
</div>
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 want to hide inline css background image of a paragraph tag to be hidden on mobile devices. How should I achieve this?
<div class="items-body">
<p
style={{ background: `url('${item.image.childImageSharp.fluid.src}') no-repeat right 30px` }}
><Content source={item.sectiontext} /> </p>
</div>
I tried this in a separate CSS file where items-body CSS is defined but no change
#media screen and (min-width: 320px) {
.items-body p{
background: URL ('');
}
}
or
#media screen and (min-width: 320px) {
.items-body p{
background: none;
}
}
You can overwrite the inline style with !important
Use !important
#media screen and (min-width: 320px) {
.items-body p{
background: none !important ;
}
}
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>
I want to change the order of two divs. The HTML:
<div>container
<div> Navigation backwards </div>
<div> Social buttons </div>
<div> Navigation forwards </div>
</div>
Looks like this on a big screen:
<-- [social] -->
I need to change that for small (mobile) devices to:
<-- -->
[social]
Is this possible with pure css? I could just add some HTML and solve it with display: none, but that's an ugly solution imo.
So #acudars is right... but there's some things to consider here. One thing is that the order of your markup will make it tricky to achieve this... so by adding the social buttons at the bottom you can assure this will be easier to achieve.
I went ahead and made a jsFiddle: Demo
HTML
<div class="navCont">
<div class="arrowPrev">←</div>
<div class="arrowNext">→</div>
<div class="socialButtons">Social Buttons</div>
</div>
CSS
.navCont {
background: #f6f6f6;
border-radius: 5px;
clear: both;
overflow: hidden;
padding: 5px 10px;
}
.arrowPrev {
float: left;
}
.socialButtons {
text-align: center;
}
.arrowNext {
float: right;
}
#media (max-width: 320px) {
.socialButtons {
float: none;
clear: both;
}
}
So lets say that you are targeting mobile devices at 320px width... just go ahead and resize the fiddle to see this in action.
The CSS is very straight forward and I just added a little style to make it clear.
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }