I am trying to give different background images for different screen sizes. The background-image should be visible completely. I tried this solution enter link description here but it's not working out.
Firstly, how to give height property for different screen sizes and what are image sizes applied to mobile screen, tablet screen and desktop screen.
.miracle {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-image: url(https://i.postimg.cc/Y0sWXBXs/Anti-Aging-1280x712.jpg);
}
/*--For mobile devices--*/
#media (max-width: 480px) {
.miracle {
background-image: url(https://i.postimg.cc/T3Wr4hvq/Anti-Aging-768x600.jpg);
}
}
/*-----For tablets: ---------------*/
#media (min-width: 481px) and (max-width: 1024px) {
.miracle {
background-image: url(https://i.postimg.cc/T3Wr4hvq/Anti-Aging-768x600.jpg);
}
}
/*-----For desktop devices ------*/
#media (min-width: 1025px) {
.miracle {
background-image: url(https://i.postimg.cc/Y0sWXBXs/Anti-Aging-1280x712.jpg);
}
}
<div class="miracle"></div>
For an article that is written in 2020 the approach does not make sense in a few ways. Not trying to talk bad about the author but here is the thing.
1.
You should have a mobile first thinking so your first background-image should be for mobile, so your first media query should be for the next size and so on,
example: keep in mind the first is mobile
.miracle {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-image: url();
}
/* next size - tablet */
#media (min-width: 768px) {
.miracle {
background-image: url();
}
}
/* next size - tablet landscape and it covers desktop */
#media (min-width: 1024px) {
.miracle {
background-image: url();
}
}
/* next size - larger desktops */
#media (min-width: 1280px) {
.miracle {
background-image: url();
}
}
as for the height it depends if miracle is your main container or it has a parent that controls the height. If it is your main you add heights to .miracle, two examples here.
.miracle {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-image: url();
height: 280px;
}
/* next size - tablet */
#media (min-width: 768px) {
.miracle {
background-image: url();
height: 380px;
}
}
Use object-fit on the image tag instead of background-image. That way you can get the same effect as an background-image with the benefits of the image tag. My example also takes advantage of srcset meaning you can set all the images you want for breakpoints and the browser will take care of it. Browser support for object-fit is great, of cause IE is the problem, if you need the support for that, not to worry my example has polyfill that handles that (a javascript).
if ("objectFit" in document.documentElement.style === false) {
const images = document.querySelectorAll(".background-images");
for (let image of images) {
const parent = image.closest();
const objectFitType = getComputedStyle(image).objectFit;
if (parent !== null) {
parent.style.backgroundImage = `url(${image.src})`;
parent.style.backgroundSize = objectFitType;
parent.classList.add("no-object-fit");
}
}
}
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
background-color: #040A19;
}
.hero {
position: relative;
display: flex;
align-items: flex-start;
justify-content: flex-start;
background-color: #ededed;
padding: 2rem;
margin: 2rem;
height: 40rem;
overflow: hidden;
border: .5rem solid #ffffff;
}
.hero__headline {
position: relative;
z-index: 10;
display: inline-block;
font-size: 2rem;
color: #090909;
background-color: #ffffff;
padding: 1rem;
}
.hero__images {
position: absolute;
top: 0;
left: 0;
display: block;
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
}
.use-content {
padding: 2rem;
margin-right: 2rem;
margin-bottom: 2rem;
margin-left: 2rem;
background-color: #263749;
color: #ffffff;
}
.use-content__headline {
margin: 0 0 1.6rem 0;
}
.use-content__list {
padding: 0;
margin: 0 0 0 1rem;
}
.use-content__list li {
margin-bottom: .5rem;
&:last-child {
margin-bottom: 0;
}
}
pre {
display: inline-block;
padding: .25rem;
margin: 0 .2rem;
background-color: #0E1828;
}
<div class="hero image-parent">
<div class="hero__headline">Audi e-tron GT</div>
<img class="hero__images background-images"
sizes="(max-width: 2121px) 100vw, 2121px"
srcset="
https://source.unsplash.com/cpTecdXH3q8/600x700/ 600w,
https://source.unsplash.com/cpTecdXH3q8/994x700/ 994w,
https://source.unsplash.com/cpTecdXH3q8/1305x700/ 1305w,
https://source.unsplash.com/cpTecdXH3q8/1569x700/ 1569w,
https://source.unsplash.com/cpTecdXH3q8/1805x700/ 1805w,
https://source.unsplash.com/cpTecdXH3q8/2038x700/ 2038w"
src="https://source.unsplash.com/cpTecdXH3q8/1805x700/"
alt="the awesome building">
</div>
<div class="use-content">
<h2 class="use-content__headline">How it works</h2>
<ul class="use-content__list">
<li>Using <pre>srcset</pre> instead of divs</li>
<li>Using <pre>object-fit: [type];</pre> so the image can act as <pre>background-image</pre></li>
<li>Polyfill is a script that checkes if <pre>object-fit</pre> is supported, if not, it will take the image and place it on its parent as <pre>background-image</pre> with the same cover type as the image</li>
</ul>
</div>
3.
3.a: Use srcset on image, link
3.b: Use picture, link
You need to give height:100%; for image like mentioned below,
html, body, .miracle {
height: 100%;
}
if you check in this reference example they give us an example so you can check link
Example
Related
I'm using the featherlight lightbox to open iframes with different widths, please see the 1st 2 links on the fiddle below:
http://jsfiddle.net/sm123456/d5Lvw1rs/
The issue is that I seem I cant seem to be able to make the iframe responsive ie. when the browser window goes below the iframe width, the iframe should switch to 100%.
I've tried the code below which should work great, but doesn't, even when removing data-featherlight-iframe-height="575" data-featherlight-iframe-width="800".
data-featherlight-iframe-style="width: 100% !important; max-width: 800px !important;"
Any assistance would be very much appreciated!
After reading the documentation, I found out you can add a custom class to the lightbox using the data-featherlight-variant="classname" attribute. Using this attribute, I added a different class to both the 800px and the 1350px one. Using that class, I applied the style. Check the JSFiddle to see it in action.
For the 800px width one:
data-featherlight-variant="custom-class-800"
#media only screen and (max-width: 800px) {
.custom-class-800,
.custom-class-800 .featherlight-content{
width: 100%;
}
.custom-class-800 .featherlight-content .featherlight-inner {
margin: 0 auto;
}
}
For the 1350px width one:
data-featherlight-variant="custom-class-1350"
#media only screen and (max-width: 1350px) {
.custom-class-1350,
.custom-class-1350 .featherlight-content {
width: 100%;
margin: 0;
}
}
JS Fiddle
Hey #JimWids
Try to use that CSS:-
.featherlight-iframe .featherlight-content{
/* dimensions: 1140px prevents iframe from spanning the full width of the browser */
width: 80%;
max-width: 1140px;
/* spacing */
margin: 0;
padding: 0;
}
.featherlight-iframe .featherlight-inner{
/* positioning */
display: block;
float: left;
position: relative;
/* dimensions */
width: 100%;
}
.featherlight .featherlight-inner:after{
/* dimensions */
content: "";
float: left;
width: 80%;
height:80%;
padding-top: 57%;
display: block;
position: relative;
}
}
Here is that code:- JS_Fiddle
use this css
#media (max-width: 1024px){
.featherlight .featherlight-content {
width: 100%;
}
.featherlight .featherlight-image {
width: 100% !important;
object-fit: cover;
}
}
TL;DR: How to keep the div children proportional to the div itself?
I have a div, containing various elements like text, images, icons etc. It keeps 16:9 aspect ratio and fills as much viewport it can, while resizing the browser window, the div (with background different from the body background) changes size well, though the contents are staying the same size which is bad because I'm trying to make a presentation website which needs to look the same at various resolutions. How do I make the child elements align and resize properly inside the div?
I tried using viewport units though it didn't turn out really well.
My Code:
I tried using % units to set font size and then use em to scale other things but it didn't work. I also tried using only % units to set all properties but it did not work either
body {
background: black;
user-select: none;
margin: 0;
height: 100vh;
}
.container2 {
overflow: auto;
box-sizing: border-box;
resize: both;
overflow: auto;
max-width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.presentation-place {
user-select: none;
background: white;
top: 50%;
transform: translate(0, -50%);
position: absolute;
align-items: center;
aspect-ratio: 16 / 9;
}
#media screen and (max-aspect-ratio: 16 / 9) {
.presentation-place {
width: 100vw;
}
}
#media screen and (min-aspect-ratio: 16 / 9) {
.presentation-place {
height: 100vh;
}
}
.slide {
font-size: 100%;
position: absolute;
top: 0;
bottom: 0;
margin: 0 auto;
width: 100%;
height: 100%;
overflow: hidden;
background: red;
background-position: center center;
}
.title1 {
margin-left: 1em;
font-size: 6em;
position: absolute;
margin-top: 2em;
}
<html>
<body>
<div class="container">
<div class="presentation-place">
<div class="slide s1">
<h1 class="title1">test</h1>
</div>
</div>
</div>
</body>
</html>
Make sure to avoid specific units like cm, px etc because those are fixed units no matter the scale of the site itself or the monitor, the use of Units like % since vh/vw didnt work. % scales relative to the size of the monitor or website, so this should help. Alternativly you could use aspect-ratio because it scales relative to the size of the parent element
I'm having trouble getting some list elements back to their right place after resizing the window back from "#media screen and (max-width: 800px)".
These list elements are as default centered in line in the header and my goal is to have them displayed in my sidebar on smaller devices.
Right now everything works great when resizing from big screen to small screen but then I use some javascript in small screen mode to open and close the side menu and when I then try to resize it back to big screen size the list elements doesn't go back to where they are supposed to be.
They seem to stay aligned left of the page and not centered in line anymore.
Also I've checked for overrides in the css that could cause this problem but there seem to be none and it's strange that it works before I use javascript.
// för att öppna sidomenyn med 250 width
function openNav() {
document.getElementById("minHuvudmeny").style.width = "250px";
}
function closeNav() { <!--Script för att stänga sidomenyn med 0 width-->
document.getElementById("minHuvudmeny").style.width = "0";
}
body {
text-align: center;
background-image: url(bakgrund.jpg);
background-position: bottom;
background-size: auto;
font-family: 'Cuprum', sans-serif;
left: 0;
margin: 0; }
.navknapp { ****Here i put the nav list inline****
display: inline;
margin: 10px; }
#media screen and (max-width: 800px) {
.huvudmeny {
height: 100%;
width: 0;
background-color: #fff;
position: fixed;
z-index: 1;
overflow-x: hidden;
transition: 0.5s;
top: 0;
left: 0;
padding: 0;
padding-top: 60px;
}
.visameny {
display: block;
font-size: 50px;
text-align: left;
cursor: pointer;
position: fixed;
margin-left: 10px;
top: 0;
}
.ejvisameny {
display: block;
}
.huvudmeny .navknapp { Here i put the navlist back to blocks
display: block;
border: 1px solid black;
transition: 0.3s
}
.huvudmeny .navknapp:hover,
.offcanvas .navknapp:focus {
background-color: red;
}
.huvudmeny .ejvisameny {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
}
<header>
<h1 id=huvudRubrik>Välkommen till Daniels sida</h1>
<nav id="minHuvudmeny" class="huvudmeny">
✖
<li class="navknapp">Home</li>
<li class="navknapp">News</li>
<li class="navknapp">Contact</li>
<li class="navknapp">About</li>
</nav>
<span class="visameny" onclick="openNav()">☰</span>
</header>
I suggest that you add another media query for desktop (min-width:801px) where you assign a 100% width to a nav with !important.
#media screen and (min-width: 801px) {
.huvudmeny {
width:100% !important;
}
}
Thus, you'll override a Zero width of a nav, that sticks the menu to left edge.
demo
I'm currently designing a website and there's a problem regarding the website footer.
When viewed on Desktop, the footer looks like this:
Website Footer viewed on Desktop
The code used to create this look is:
<meta name="color:Footer Background Color" content="#000000">
CSS CODE
/*-----------------------------
footer
-----------------------------*/
.bottom-footer {
background-color: solid #ffffff;
}
.bottom-footer, .bottom-footer a, .back-to-top a {
color: solid #000000;
}
.footer-message {
display:flex;
justify-content:space-between;
list-style-type:none;
width:500px;
}
.bottom-footer {
clear: both;
height: 80px;
width: 100%;
position: relative;
bottom: 0;
z-index: 1
}
.bottom-footer p {
font-size: 1.4rem
}
.footer-message {
float: left;
margin-top: 33px;
margin-left: 20px
}
.creation {
float: right;
display: block;
margin-top: 33px;
margin-right: 20px;
font-size: 1.4rem
}
.back-to-top {
position: absolute;
margin-top: 20px;
text-align: center;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 30px
}
.back-to-top a {
font-size: 3rem;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.back-to-top a:hover {
opacity: .5;
text-decoration: none
}
.back-to-top .fa-angle-up {
font-size: 4rem
}
footer.bottom-footer {
height: 150px
}
.footer-message {
padding: 40px 0 0
}
.creation,
padding: 10px 0 0
}
.creation,
.footer-message {
float: none;
text-align: center;
margin: 0
}
.back-to-top {
margin-top: 0;
top: 0
}
HTML CODE
<footer class="bottom-footer">
<p class="footer-message">
Home
About
News
Musings
Music
Media
Shows
Store
Contact
Ask
</p>
<a class="back-to-top" href='#'>^<i class="fa fa-angle-up"></i></a>
<div class="creation" style="text-decoration:none">
© 2016 Sam Joel Nang. All Rights Reserved.
</div>
</footer>
Now the problem is, when (for example) the window's width is decreased, the footer elements seem to scatter, the .creation element goes out of the footer and goes below.
What I want to do (when website is viewed in small window width, or on Mobile Devices screens) is to 'center' and 'stack' the footer elements (.footer-message, .back-to-top, and .creation) in the following order: top: .back-to-top, middle: .footer-message, and bottom: .creation, with the Footer Background Color still #ffffff. A small photo edit can represent what I mean:
Ideal Website Footer look on Mobile Device or small Desktop window width
I hope someone can help me. Thank you so much.
Introducing media queries
In order to achieve what you're looking for, you can use media queries in CSS.
For example, if you want to stack the footer elements at a screen width of 480px or less, the following media query will allow you to style for that scenario only:
#media (max-width: 480px) {
// Styles here
}
Given that, let's get on to the point of stacking. You have different position attributes currently on the elements you're trying to stack. The easiest way to stack elements on top of one another is to use the properties display: block; and float: left;. This way, the elements will span the width of their container and appear in the order they are in inside the document's HTML.
Let's take a look at how you might go about that:
#media (max-width: 480px) {
.footer-message {
float: left;
display: block;
}
// center the links inside footer-message
.footer-message a {
text-align: center;
width: 100%;
}
.creation {
margin: 0 auto; // center it
display: block;
}
.back-to-top {
position: relative; // absolute positioning removes the element from document flow so we want to go relative
display: block;
margin: 0 auto; // center it
}
}
Note I simply removed the other properties since they're applied at all screen sizes already. You may want to alter those inside this media query in case the new styles affect their layout or you'd like it to differ for mobile.
Hope that helps!
UPDATE: I just noticed the part about you wanting to center the elements, I've added some code above to do so.
How can I use CSS #media to imitate javaScript for the this condition below?
For instance, I want to run the code inside #media only when the image's height is longer than window's height, or in other words, when only the right scroll bar appears because the image height is too long.
.img-container {
text-align: center;
}
#media (min-height: 60em) {
.img-container {
display: inline-block;
height: 100vh;
width: 100%;
text-align: center;
border: 4px solid green;
}
.img-container img{
height: 100%;
}
}
so if I have this image in my html,
<div class="img-container">
<img src="http://placehold.it/400x850"> <-- a long image height so run the code inside #media
</div>
but if I have this below instead in my HTML,
<div class="img-container">
<img src="http://placehold.it/400x450"> <-- don't run the code inside #media
</div>
In javascript, if you detect the image height is longer than the screen height, then you run the code to scale down the image, while if it detects the image height is smaller than the screen height, then do nothing
Is it possible with css #media?
This is what I get at the moment:
I think this is the answer I am looking for:
.img-container {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
}
.img-container img{
max-height:100%;
margin-left: auto;
margin-right: auto;
}