Trying to set the appropriate (meaning media query for the background header image in which will display the header image as it should be) of the website careertechpa.org. As you might see in the image attached, on the larger desktop screens, the bottom is getting cut off.
oversized-background
Here's the code for the header image:
.header-one{ height:200px;
background-image: url('careertechpa.org/wp-content/uploads/2020/02/…);
background-size:102%; }
I tried setting this media query but it didn't seem to work.
#media only screen and (min-width: 1440px) {
/* styles for MacBook Pro-sized screens and larger */
}
What am I missing?
Related
My wife is using a cover page temporarily for her site - we want a different background image used on mobile than on desktop. I am a complete neophyte however have injected CSS through the Advanced settings tab for the cover page and have inserted the following:
<style>
#media screen and (max-width: 480px) {
body {
background-image:url('http://s30.postimg.org/kqqdomkep/Ivy_Row_Icon_BACKGROUND_v2.jpg');
}
}
</style>
and it does not work. What am I doing wrong? Any help someone can provide would be greatly appreciate.
I can provide the website URL if required.
You are using a 640x1136px background image for screens narrower than 480px without resizing the background. Also, your image features a large white space at the top. I think the image loads but you are only seeing the top of the image, drawing the false conclusion it doesn't load.
This should display the image on small devices:
#media (max-width: 480px) {
body {
background:
white
url('http://s30.postimg.org/kqqdomkep/Ivy_Row_Icon_BACKGROUND_v2.jpg')
no-repeat
center
/contain;
min-height: 100vh;
margin: 0;
}
}
The key is the /contain part of the background shorthand, which could also be written separately as background-size: contain;
Other possible values include:
cover (image gets cropped but covers the element),
Length (in px, em, rem, vw, cm, in etc...),
auto ( original size - also default - what you see now),
initial (reset to initial state)
inherit (apply property of parent)
I've used the following CSS to resize an image for the mobile version of this site.
.title-desc-image {}
#media only screen and (max-width:560px) {
.title-desc-image {
zoom:70%;
margin:auto;
}
}
However, you'll see that I'm left with a light grey from where the bottom of the image would have landed.
Is there a way to get rid of this, or a better way to resize the image?
Thanks.
I am trying to align a bottom bar that is in homepage footer of my website. I want to adjust it so it will look good on common screen resolutions.
I have an issue with these resolutions 1280x960 and 1280x1024
#media only screen and (max-width:1280px) and (max-height:960px){
.tp-caption.black, .black {
margin-top: 496px!important;
}
And then use this code after that
#media only screen and (max-width:1280px) and (min-height:961px){
.tp-caption.black, .black {
margin-top: 464px!important;
}
The issue is it uses the same css, for both resolutions. 1280x960 media query
also applied in 1280x1024 resolution.
It displays the 2nd media query css code in browser, but ignores it and take
the above query.
I want to set the margin for both resolutions, for both heights 960 & 1024.
Can someone please explain me how to fix this?
Tried the same in fiddle, this works fine.
jsfiddle.net/5wx9qqyq/3/
One possible cause can be, missing closing braces for
#media only screen and (max-width:1280px) and (max-height:960px){ }
Please verify.
So using the following code with template I can set when responsive mode kicks in.
#media all and (max-width: 680px)
However is there a query that if the browser width goes below for ex. 380px responsive, items stop minimizing etc. and stay at what would appear at 380px responsive only. So if someone was minimizing browser or had viewport of 280 they would be viewing what it looks like at 380px responsive but with scroll bars?
Any help would be appreciated.
Thanks.
You could simply set a min-width on the body element.
Example Here
body {
min-width:380px;
}
Bootstrap doesn't offer that level of control but you can simple add the following media query and then impose styles on elements on screen sizes smaller than 380px wide.
#media all and (max-width: 379px) {
// Style elements specifically for screen sizes less than 380px
}
If I opened this on a screen 800px wide, would both the small and big jpg be loaded? or is the browser intelligent enough to ignore the smaller image?
#media screen and (min-width: 480px) {
div {
background-image: url(images/small.jpg);
}
}
#media screen and (min-width: 600px) {
div {
background-image: url(images/big.jpg);
}
}
Since both media queries will be fulfilled and both rules use the same selector, the second div rule will take precedence, and only big.jpg will be loaded for any div. Once you resize the browser window until the second rule no longer applies, it should go ahead and load small.jpg.
I made a quick test page with your CSS. Firebug's Net panel verified that big.jpg was being loaded at my usual browser size, and small.jpg only loaded once I made my browser window narrow enough.