What I'm working with now http://pastebin.com/3CSs2tCA
You can paste it in here. http://htmledit.squarefree.com/
In Firefox, if the window is less than 786px wide, the logo gets smaller and keeps its ratio. In Chrome (and my phone), the image keeps its height and gets squished skinny. No idea what to change to fix it.
Thank you to a kind person on Freenode's #css channel for the answer.
Old code:
#media only screen and (max-width: 786px) {
#logo {
vertical-align: middle;
display: table-cell;
height: 100%;
width: 100%;
min-width: 75px;
min-height: 75px;
}
changed height to max-height: 100%, and width to auto.
#media only screen and (max-width: 786px) {
#logo {
vertical-align: middle;
display: table-cell;
max-height: 100%;
width: auto;
min-width: 75px;
min-height: 75px;
}
Related
What can I do to make the body cover the whole page? In my CSS for body and html height and width 100%.
With the mobile version, the body is reduced in this way
With the pc version, everything is fine with the width, but the height is not on the whole page
html {
overflow: auto;
height: 100%;
width: 100%;
}
body {
background-color: #1c1c1c;
font-family: 'Press Start 2P', cursive;
}
Here is my full html and css
and if you can tell me what else can be corrected, I will be very grateful
many of your elements have fixed width in px, which doesn't change in the media query. E.g. you have:
.container {
width: 890px;
...
}
.menu__list {
...
width: 700px;
}
You need to change them in your media query
#media screen and (max-width: 450px) { ... }
Personallly I'd keep only the container width in px for desktop and other things in percents, then in mobile versions I'd keepp them all in percents like
.container {
width: 100%
}
Or sometimes
.container {
width: 100%
max-width: 320px;
}
Basing on the first code you posted.
Modify your container class css (Desktop) since its inheriting from wrapper.
.container {
margin: 0 auto;
}
Your current css ( remove width & padding )
.container {
width: 890px;
margin: 0 auto;
padding: 0 20px;
}
Mobile is fine, its just inheriting the screen size of the emulator.
I have used a media query to hide an element when the screen size decreases. I set max-width to 780px.
`#media only screen and (max-width: 780px) {
/* the container for #left and #right elements */
.container {
width: 300px;
height: 400px;
overflow: auto;
}
/* the element to be hidden */
#left {
display: none;
}
/* this element should then take up the whole width of the container */
#right {
width: 300px;
height: 400px;
border-radius: 2%;
}
}`
It behaves as per the media query only at about 770px and below.
I have also included bootstrap classes col-sm-12 col-md-6 for #right.
Between 780px and 770px, #left gets hidden but the #right does not occupy the full space of .container. Instead, #right takes up the first half space of .container, where #left should be and the original space of #right is unoccupied.
What is this unwanted gap and how do I eliminate it?
There are two things min-width and max-width and it functions as
if you use (min-width:768) it means that the design will be applied to the screen width greater than 768px, i-e: from 768px - infinity.
if you use (max-width:768) it means that the design will be applied to the screen width less than 768px, i-e: from 0 - 767px.
Coming back to your question.
.container {
width: 300px;
height: 400px;
overflow: auto;
}
Here you are specifying the width of container as 300px, change it as
.container {
max-width: 100%;
width: 100%;
height: 400px;
overflow: auto;
}
Similarly,
#right {
width: 100%;
height: 400px;
border-radius: 2%;
}
Please let me know If it helps.
Try changing the width to 100% and it should work.
#right {
width: 100%;
height: 400px;
border-radius: 2%;
}
I have different image sizes in a div in a bootstrap carousel. It is either landscape or portrait images and if I set the width to be 100% the landscape images become perfect but the portraits to high.
And if I set max-hight to it the lanscape images doesn't become full width.
Link to Wep-page
CSS:
.case-box {
margin-bottom: 1.5em;
display: flex;
width: 100%;
height: 420px;
align-items: center;
justify-content: start;
}
#media (min-width: 768px)
.case-box {
height: 428px;
}
#media (min-width: 1280px)
.case-box {
height: 540px;
}
.case-img {
width: auto;
max-height: 100%;
}
Why don't you use Bootstrap 4 class .img-fluid for making images responsive (.img-responsive for Bootstrap 3)?
Set your images with css:
max-width: 100%;
max-height: 100%;
It should adapt them correctly no matter the height of width.
Solved it by creating images within a white frame, so they all have the same width and height.. Simple but not the best.
Working on a news site and once I get to mobile, I'd like it where the image fits inside the entire width of the div....whatever that might be. The images are originally 240px in width so we are talking about bumping them up. This is what I'm currently using:
.thumb { float: left; clear: both; width: 100%; height: auto; margin: 0; }
.thumb img { max-width: 100%; max-height: 100%; }
So on my iPhone, the pic it a little bit too small since the div is 320px and the img is 240. Of course, this would change for say, landscape at 480px for example. So it needs to be flexible. Any suggestions?
You might try the following, set the image width to 100%.
.thumb {
float: left;
clear: both;
width: 100%;
height: auto;
margin: 0;
}
.thumb img {
width: 100%;
}
<div class="thumb">
<img src="http://placehold.it/200x100">
</div>
#media screen and (max-width: 480px) //place whatever the resolution you are working here{
/*enter your code here for this resolution*/
}
to learn more about
media queries
This is very simple as like this.
img {
width:100%;
}
div{
float: left; clear: both; width: 100%; height: auto; margin: 0;
}
<div>
<img src="http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg" />
</div>
One of my questions about applying float to resizable images was answered by Gasim (thankyou) but I still have one more problem to fix.
I have two images which have this css code applied to them...
.image-container {
display: inline-block;
width: 100%;
background-size: cover;
background-position: center;
background-image: url(Images/Filler2.png);
height: 250px;
margin-right: auto;
margin-left: auto;
}
#media only screen and (min-width : 1200px) {
.image-container {
max-width: 500px;
}
}
.image-container2 {
display: inline-block;
width: 100%;
background-size: cover;
background-position: center;
background-image: url(Images/Filler3.png);
height: 250px;
margin-right: auto;
margin-left: auto;
}
#media only screen and (min-width : 1200px) {
.image-container2 {
max-width: 500px;
}
}
So now they're resizing correctly and aligned next to one another, I am unable to position them horizontally like my example below. I have tried the only way I know how to do this (margin-left: auto , margin-right:auto) but this didn't work. Also padding isn't working? Is there some part of this code which prevents these both from working and if so what do I need to fix it?
Any input if helpful thanks :)
Maybe this is not the best solution for responsive images, but I generally use media queries with a mobile first approach and it has been working out great. Basically, you set the boxes' widths to 100% by default and on larger screens you set the width that you want:
.image-container {
float: left;
width: 100%;
background-size: cover;
background-position: center center;
background-color: red; /* for testing */
height: 250px;
}
#media only screen and (min-width : 1224px) {
.image-container {
max-width: 500px;
}
}
Here is the result: http://codepen.io/gasim/pen/xbYQdd
Try to make the window size smaller and you will see the difference. It is much simpler to test, debug, and modify this code.
EDIT: Forgot to mention. If you can also use display: inline-block instead of floats.
EDIT 2: To add padding between containers you need to add margin to a specific value, not auto. For example:
.image-container {
/* rest of the values */
margin: 5px;
}
This will add 5px margin to left, right, top, and bottom of the image container. If you want to have center the image containers also, I would add them in another container:
<div class="container">
<div class="image-container" style="background-image: url(URL_HERE);"></div>
<div class="image-container" style="background-image: url(URL_HERE);"></div>
</div>
and add the styles:
#media only screen and (min-width: 1224px) {
.container {
width: 80%;
margin: 0 auto;
}
}
Also, please check out the way I added the background images, using styles. It is much cleaner than writing CSS for each background image. That way you can have one class image-container and just add as many background-images without relying on CSS.