I have css that should make the div margin go to 10% if the screen is 1920px wide or less, and 20% margin-left if the screen width is any higher. For some reason though, the media query is not working. Here is the code for it. Thanks!
.about-me-header{
width: 200px;
margin-left: 20%;
height: 20%;
}
#media only screen and (max-width:1920){
.about-me-header{
margin-left: 10%;
}
}
You must specify the type of length. Like 1920px
#media only screen and (max-width:1920px){
.about-me-header{
margin-left: 10%;
}
}
Related
I have a problem with width and height of images on the smartphone. I use this code. But I don't know why on the smartphone it also uses the same height of 13em like on desktop screen. All other amartphone definitions work fine.
#media only screen and (max-device-width: 60em) {
/* STYLES HERE for DEVICES with physical max-screen width of 60em */
article img {
float: left;
margin-right: 0.2em;
width: 100%;
height: auto;
}
}
article img {
float: left;
margin-right: 0.2em;
height: 13em;
}
Try putting the media query under the article img.
Not related but you don't need to repeat float and margin-right since you're not overriding them.
I wanna make a image responsive but only till to an specific width of the screen. Say if the user starts from 300px width to enlarge the screen the image should be responsive and should grow with the screen width. Once a width of 1440 px is achieved the image should stop with adapting the scale. Imagine a image in the following code
<style>
.left-main {
flex: 30%;
background-color: #ffffff;
}
.icon-position{
margin-top: 200px;
margin-left: 33.195%;
width: 61%;
height: auto;
}
</style>
<div class = "left-main">
<img src="images/Developer_Icon.svg" class="icon-position" width="178" height="180">
</div>
At an specific display width the image should stop to be "responsive" and should hold the last size which the image had. How can I do that?
You can use max-width css property. Documentation
.icon-position{
margin-top: 200px;
margin-left: 33.195%;
width: 61%;
height: auto;
max-width: 1400px; // anyvalue here
}
.image-position{
max-width: Enter width of your choice here;
}
Max width in css is used to define the maximum width an element can have. The element will stop becoming wider after the max-width is achieved.
Thanks😊
You can use two ways. First, check what is width of image in specific window width and then use this:
#media screen and (min-width: 1440px) {
.image {
width: 600px; //define image width
//here set all other parameters, fixed position etc.
}
}
Second way is to use JavaScript. When window is in needed width then get image's width and write it into style. If you need, I can add JS code for this.
<style>
.left-main {
flex: 30%;
background-color: #ffffff;
}
.icon-position{
margin-top: 200px;
margin-left: 33.195%;
width: 61%;
height: auto;
}
#media screen and (min-width: 1440px) {
.icon-position {
width: 700px; /*Instead of width: 700px, you can define you own desired width of the image, after 1440px screen size.*/
}
</style>
<div class="left-main">
<img src="images/Developer_Icon.svg" class="icon-position" width="178" height="180">
</div>
I would like my Bootstrap layout to not act responsive when the width is 768px or smaller. You can view my current application HTML / CSS here, https://codepen.io/anon/pen/xXdYNa. I have had to make some changes to some of the standard Bootstrap styles so it might make things a bit more tricker.
Does anyone have any tips on how to achieve this by using CSS overrides, similar to what I have done here:
#media (min-width: 768px) {
.main {
padding-left: 250px;
padding-top: 89px;
}
}
Thanks!
How about just giving .container-fluid a min-width with 768px?
EDIT:
Adding the following worked for me:
.container-fluid {
min-width: 768px;
}
.main {
padding-left: 250px;
padding-top: 89px;
}
A min-width in combination with removing the media query which is around your .main should work.
https://codepen.io/anon/pen/EwmEXr
#media only screen and (max-width: 768px) {
.main {
padding-left: 0px;
padding-top: 0px;
}
}
I have modal that displays images. I set height of image in modal on 90% and width automaticly scales with it, so image is not stretched. But on the mobile phone I want the height to not be defined and I want to define only width to 100%. How do I make height of the image on small screen not defined? till now I have this code:
.image {
height: 80%;
}
#media only screen and (max-width: 700px){
.image {
width: 100%;
/* make height not defined?!
}
}
Use height: auto; in mobile screens.
#media only screen and (max-width: 700px){
.image {
width: 100%;
height: auto;
}
}
#media only screen and (max-width: 700px){
.image {
width: 100%;
height: auto;
}
}
How can I set padding to 0 when I have resolution 1366x768px if its higher then 768 then i want padding to be 60 on top
This is what I tried so far but it is not working (tried with min-height, max-height, etc). Any other solution for this?
#media (min-height: 768px) {
body{
padding-top: 0px;
}
}
body {
padding-top: 60px;
padding-bottom: 0px;
margin: 5%;
}
so how can i remove padding when my resolution is smaller then 786px ?
You specified the rules in wrong order. They should be:
body {
padding-top: 0;
padding-bottom: 0;
margin: 5%;
}
#media (min-height: 768px) {
body {
padding-top: 60px;
}
}
NB: it seems like you are trying to target 768px tall screens, the actual height used by the browser will be lesser.