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.
Related
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%;
}
}
How do I setup HTML/CSS to have my DIV follow the screen size for width, but stop expanding once it fits the contents (it should scroll left/right when the div cannot fully contain the contents).
Pseudo-Code:
HTML:
<div class="image-container">
<img width="1000">
</div>
CSS:
.image-container {
/* ??? */
display: inline-block; /* ??? */
overflow: auto;
}
EDIT: Per Evadore's answer, I was able to come up with the following CSS.
.image-container {
display: inline-block;
overflow: auto;
}
/* optimize these px dimensions, 900 worked for my application */
#media (max-width: 900px) {
.image-container {
max-width: 710px;
}
}
/* redundant, I plan to tweak this range later */
#media (min-width: 901px) and (max-width: 1575px) {
.image-container {
max-width: 710px;
}
}
#media (min-width: 1576px) {
.image-container {
max-width: 1385px;
}
}
The following reference also helped: w3schools
Use CSS Media queries to setup for various screen sizes.
view source code of this page to see how media queries were used.
for this set the parent div width to fit-content and max-width to 100%. now the parent div will remain between the width of the content and the with of the screen if the screen size is not enough. And lastly for scrolling inside the parent div on the small screen devices put overflow:scroll.
Here is the Codepen demo
.parent {
background-color: green;
width: fit-content;
max-width: 100%;
overflow: scroll;
}
.child {
padding: 30px;
width: 700px;
background-color: red;
color: #fff;
}
<div class="parent">
<div class="child">
test string
</div>
</div>
ps: I've added bg colors just for reference purposes, to show whether the parent component is expanding or not.
I can't seem to be able to change the width or height on my website, what am I doing wrong here? Here's my website if it's easier to check ut out: http://sstromberg.saldev.nl/gmaps.html
Ignore the menu, still working on that.
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.locatie {
position: relative;
padding-bottom: 56.25%;
text-align: center;
}
.locatie iframe {
width: 75%;
height: 50%;
margin: 0 auto;
display: block;
border: 0;
}
}
<div class="locatie">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2434.6620047353485!2d6.265314715523063!3d52.3946772797907!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c7e676b805f373%3A0x82055a9731e6d8ba!2sLandstede!5e0!3m2!1snl!2snl!4v1513254153672" style="border:0" allowfullscreen></iframe>
</div>
Device-width refers to the display's resolution (eg. the 1024 from 1024x768), while width refers to the width of the browser itself (which will be different from the resolution if the browser isn't maximized). If your resolution is large enough to get you in one break point, but the width of the browser is small enough to get you in another one, you'll end up with an odd combination of both.
Unless you have a legitimate reason to restrict the style sheets based on the resolution and not the size of the viewport, then just use min-width/max-width and avoid min-device-width/max-device-width.
#media only screen and (min-width : 320px) and (max-width : 480px) {
.locatie {
position: relative;
padding-bottom: 56.25%;
text-align: center;
}
.locatie iframe {
width: 100%;
height: 50%;
margin: 0 auto;
display: block;
border: 0;
}
}
https://plnkr.co/edit/XZYSgaXQGGj9AehhZ0tH?p=preview
you can use
#media(min-width:0px) and (max-width:768) {
.locatie iframe {
width: 100%;
height: according to your;
}
}
In mobile you can use 100% it's batter to responsive not PX
So I'm trying to make this website mobile friendly: coveartschildcare.com and all the header divs are overlapping and nothing I've tried seems to be working. This is the CSS I'm using:
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
div#logo
{
float: left;
}
div#logo h1
{
font-size: 0.5em;
color: #777;
}
div#logo span
{
font-size: 1.4em;
color: #FFF;
}
div#header
{
background: url(../images/mobile-bg.jpg) no-repeat bottom center;
text-align: center;
float: left;
}
div#nav
{
z-index : 1;
float: left;
position: relative !important;
}
.container
{
float: left;
}
.clear {
clear: both;
}
}
I've tried making positions relative, absolute, floating left or none, auto width & height and nothing works. Any help would be greatly appreciated.
ok, what you are asking is to make the div tags smaller on your page so that they don't overlap?
to do that create a new rule like this one:
#media (max-width: 520px) {
div {
width: 50px;
}
body {
color: blue;
}
}
the max-width is the max-width that the browser will activate this on.
you can create two #media rules and change the second #media rule's max-width to equal a different number. the browser will activate the rule if the width is smaller than the max-width. when the screen size gets smaller than both of the #media rules it will run the smaller one
hope this helps...
I think, if you delte the position: absolute; on the #nav-wrapper{} it is no more overlapping.
I'm fairly new to responsive web design, so don't beat me up too badly.
I have a currently fixed-width gallery page that is 1000px wide. The 1000px outer div has 30px padding and 30px between each pair of images. So I've got 910px of space available for each pair. The page might look like this:
(30px spacing)(500px img)(30px spacing)(410px image)(30px spacing)
(30px spacing)(480px img)(30px spacing)(430px image)(30px spacing)
(30px spacing)(450px img)(30px spacing)(440px image)(30px spacing)
...etc.
I'd like to convert it to a responsive page so that the images scale down as the browser window shrinks and ultimately stack on top of each other once the browser window drops below 640px.
The only way I know to make this 640px change is inside a stylesheet. Is this the only way I can do this? Am I going to have to define styles within the stylesheet for every image?
For example, for a 480px wide image:
img.img480 {
width: 48%;
float: left;
}
#media screen and (max-width: 640px) {
img.img480 {
width: 100%;
max-width: 480px;
float: none;
}
}
Here is an example of the effect you're asking for with responsive design.
A couple things to note:
margins are bad, use padding and wrappers instead
floats are bad, use inline-block instead
(Demo)
html, body {
margin: 0;
}
.wrapper {
padding: 0 15px;
font-size: 0;
}
.img-wrp {
width: 50%;
padding: 0 15px;
display: inline-block;
box-sizing: border-box;
}
.img-wrp img {
width: 100%;
}
#media screen and (max-width: 640px) {
.img-wrp {
width: 100%;
}
}
<div class="wrapper">
<i class="img-wrp"><img src="//lorempixel.com/640/480" /></i>
<i class="img-wrp"><img src="//lorempixel.com/640/480" /></i>
</div>