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.
Related
When the page is displayed on PC or tablet width it works perfectly. When on phone the body leaves empty space on the right. It isn't margin, or padding. I have tried width: 100% and width: 100vw.
Although the #media part doesn't help too much. I'm using flexbox to position everything, the viewport is activated and I have tried using position absolute / fixed on the body, but nothing works.
#media (max-width: 576px) {
body {
width: 100%;
}
main {
width: 100%;
}
header {
justify-content: center;
flex-wrap: wrap;
padding: 1rem;
}
nav {
margin-right: 0px;
}
a {
margin: 0.5rem;
}
}
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.
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 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
I have this HTML and CSS code for a webpage. I am trying to make the website mobile-friendly and resizes itself with the size of screen viewed. I want the margins to become very small when viewed on a narrow screen like a smartphone and readjusts itself gradually when the screen is bigger and margins become larger and larger until it is a full screen of, say, a desktop computer. However, this code isn't really working. (I didn't include all the other CSS parts of this code, but please ask for it if needed!)
My attempt to resize margins due to the width of the screen:
#media (max-width: 1100px, min-width: 800px) {
body {
margin-right: 20px;
margin-left: 20px;
}
#media (max-width: 750px, min-width: 501) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
}
</style>
</head>
<body>
<header>
<h1>Blog</h1>
<ul> <!-- Menu Tabs -->
<li>Home</li>
<li>Art</li>
<li>Music</li>
</ul>
</header>
</body>
Thanks, I would really appreciate your help!
You are missing a closing brace around your first media query. Also, you have some extra bits in your media queries making them invalid. The way media queries work makes the min-width parts you were trying to add unnecessary. The following code, at large screens, creates a 20px left/right margin. When the threshold of 750px is hit, 5vw kicks in, and so on.
/* Invalid:
#media (max-width: 1100px, min-width: 800px)
*/
#media (max-width: 1100px) {
body {
margin-right: 20px;
margin-left: 20px;
}
}
#media (max-width: 750px) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
}
If your intention is to start with a default 20px right/left margin, for screens even larger than 1100px, you could create a default margin in your CSS which will be overridden by your media query rules. Then, you can begin your media queries at a narrower screen size.
/* default size */
body {
margin-left: 20px;
margin-rights: 20px;
}
#media (max-width: 750px) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
}
https://jsfiddle.net/5vez3rdc/