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.
Related
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?
I have an element that is attached to the bottom of the screen correctly. using bottom: 0
however, when I move into mobile view I still want it roughly the same height but I want to be able to scroll down to view the rest of the element, almost feels like I need to remove the bottom attribute
I'm using media queries but not sure how to get the desired effect I want. coz if I remove bottom from the media query, it will just carry on applying it
any ideas?
Use media-query:https://www.w3schools.com/css/css_rwd_mediaqueries.asp
See here sizes:https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
#media only screen and (max-width: 768px) {
yourElement {
bottom: unset;
}
}
My logo has a normal size on the screen like this
and if I change the screen-size of the browser then my logo gets very small.
The logo mustn't have a small size like in the previous pictures. It should be more like in the next picture:
I know there a lots of different themes but is it possible to keep the logo big by smallering the screen?
Most WP themes have pre-set media queries that provide breakpoints to make the site responsive to screen size changes.
You can override these with custom CSS, but I'd find the breakpoint first. Use this tool and then add something like the following to your CSS:
#media screen and (max-width: 400px){
.logo{
width:200px !important;
}
}
This changes the width of the logo when the screen size is 400px or smaller. Change 400px to whatever value the breakpoint is set at. You can edit width or height this way, but there's no need to do both unless you want to.
Edit: ".logo" in the CSS above should be changed to whatever the logo's class is.
I am assuming you are using a theme and did not build this from scratch. Chances are your theme has a responsive image declaration, such as:
.someAwesomeDivName img {
width:100%;
height:auto;
}
and the parent div holding that image is a certain width, which effects the image inside it. Check there first, and go from there.
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 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.