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 ;
}
}
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 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>
I have the following code :
#media (min-width: 1200px) {
.color {
color: blue;
}
}
#media (min-width: 992px) {
.color {
color: red;
}
}
#media (min-width: 768px) {
.color {
color: green;
}
}
#media (max-width: 767px) {
}
<div class="color">Wow ji</div>
No matter what the screen size, Wow ji appears in green color only. What am I doing wrong here ?
In CSS, it is the last corresponding style that is applied, so in your code, as long as the screen is at least 768px, it will appear green.
You need either to set a max-width in the first tests, or do them in the inverse order.
Because what you are saying is at 768px or higher you want .color to be green you need to swap the order of your media queries around or use max-width
You have a bad syntax and usage, it's not even the same each time.
I would recommand doing like this :
#media screen and (max-width: 768px) { // or whatever screen size
.color {
color: green;
}
}
And you better add a <meta> viewport in your HTML to make your media queries working fine.
Some docs:
MDN - media queries
MDN - Using the viewport meta tag to control layout on mobile browsers
max-width is the maximum width at which these styles will be shown. A screen wider than the specified number will not use the styles associated with that rule. Similarly, min-width is the minimum width at which these styles will be shown. A screen narrower than the specified number will not use the styles associated with that rule. I have changed your code with max-width now its working fine all media queries , just resize the browser
#media ( min-width : 1200px) {
.color{
color: blue;
}
}
#media ( max-width : 992px) {
.color{
color: red;
}
}
#media(max-width:768px){
.color{
color: green;
}
}
#media(max-width:767px) {
.color{
color: yellow;
}
}
<div class="color">Wow ji</div>
I Have this simple media query to check resolution of browser and accordingly display or hide the image... But it works only on Chrome and does not work on firefox and IE. any idea whats wrong with my code? or any suggestions what can I do?
#media screen and (max-width: 1030px) {
#img{
display:none;
}
}
#media screen and (min-width: 1031px)
{
#img{
display:block;
}
}
Here is my HTML:
<div id="img"><img src="images/bg.png" height="575px" style="position:absolute; margin-left:6px;" style="z-index:100;"/></div>
Without seeing your html I will assume that you are attempting to hide an image with and id of image? If so I would do the following.
Change the id of img to be a class, for example we will use .image-class this will mean the style can be re-used on other images on the page as IDs have to be unique.
So your html should look similar to this:
<img class="image-class" src="http://placekitten.com/500/500" alt="kitten" />
And then for your CSS:
/* Mobile first strategy (no media query required) - images will not display when under 1030px)*/
.image-class {
display: none;
}
/* Images will display above 1030px */
#media screen and (min-width: 1030px) {
.image-class {
display: block;
}
}
See this fiddle
try display:inline-block;
#media screen and (max-width: 1030px) {
#img{
display:none;
}
}
#media screen and (min-width: 1031px)
{
#img{
display:inline-block;
}
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) { ... }