I want to fit a picture into a website that still works when you scale it, but my picture is gigantic and I can't seem to make it fit. I tried to put a restriction on the wrapper div (here called "innpakning") on the picture itself, and the surrounding div. Nothing seems to work. And even if I could get it to work, that would defeat the purpose as I want it to scale to the website window. How do I make it fit the window?
I tried using
max-width: 100%;
max-height: 100%;
and it fixed the image, but not the spacing of the rest of the website. I end up with an enormous gap between .overskrift and .innhold.
<body>
<div class="innpakning">
<div class="overskrift">
<p id="text"> Hvaler </p>
</div>
<div class="innhold">
<div class="meny">
<div class="alt"> Info </div>
<div class="alt">Bilde </div>
<div class="alt"> Lyd </div>
<div class="alt"> Video </div>
</div>
<div class="faktisk">
<img src="css/media/hval.jpg" alt="">
</div>
</div>
</div>
</body>
innpakning{
margin: 20px;
padding-left: 10px;
padding-right: 10px;
display: grid;
grid-template-rows: 1fr 1fr;
}
.overskrift{
background-color: none;
color: black;
font-weight: bold;
}
.innhold {
background-color: #29648A;
}
.meny {
background-color: none;
display: grid;
margin: auto;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
a {
text-decoration: none;
margin-left: 25px;
color: white;
}
.alt {
color: #FAFAFA;
text-decoration: none;
background-color: #25274D;
color: white;
padding: 10px;
margin: 2px;
}
.alt:hover {
background-color: #464866;
}
img {
margin-left: auto;
border: solid black;
max-width: 100%;
max-height: 100%;
}
.faktisk {
color: #DEDEDE;
padding: 15px;
margin: auto;
display: grid;
grid-template-columns: 1fr
}
#import url('https://fonts.googleapis.com/css?family=Asset');
#text {
font-family: Asset, cursive;
text-align: center;
font-size: 35px;
color: rgba(245, 246, 255, 0.96);
background-color: rgba(168, 168, 168, 0.11);
text-shadow: rgba(0, 0, 0, 0.99) 2px 2px 2px;
}
I suggest that you use the CSS unit type vw to set the max-width of the image, like so:
img {
margin-left: auto;
border: solid black;
max-height: 100%;
max-width: 100vw;
height: auto;
}
Read more at MDN: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages
Related
I'm having a serious CSS challenge on a small project I'm building:
I have a <main> element which is set as flexbox of row. inside are 3 children:
:root {
--clr-light-text: #f2f2f2;
--clr-dark-text: #48484a;
--shadow-default: 0px 2px 8px rgba(0, 0, 0, 0.2);
--vid-container-h: 0px;
color: var(--clr-light-text);
font-family: 'Poppins', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
h1,
h2,
h3,
h4 {
font-weight: 400;
}
body {
background-color: var(--clr-dark-text);
text-align: center;
overflow-x: hidden;
scroll-behavior: smooth;
}
.glass {
background-image: linear-gradient( 135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: var(--shadow-default);
border-radius: 0.5rem;
}
main {
display: flex;
justify-content: center;
padding: 0 1rem;
gap: 2rem;
}
.main-container {
background-color: hsl(0, 0%, 75%);
padding-bottom: 10rem;
position: relative;
}
.weather-box {
width: clamp(13.5rem, 18%, 20rem);
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding: 0 1em 1em 1em;
}
#weather-icon {
margin: -15% -10%;
}
.weather-details {
display: flex;
flex-direction: column;
justify-content: space-between;
}
#forecast,
#temp,
#humidity {
display: flex;
flex-direction: column;
align-items: center;
}
#temp {
margin-bottom: 1em;
font-weight: 200;
}
#temp-num {
font-size: 3em;
}
#humid {
font-size: 1.5em;
}
#humid-value {
font-size: 1.5em;
font-weight: 200;
}
#humid-value img {
max-width: 1em;
}
#forecast-desc {
font-size: 2.5em;
font-weight: 400;
}
.playlist-box {
width: clamp(13.5rem, 18%, 20rem);
display: flex;
align-items: center;
flex-direction: column;
padding: 1rem 0.5em;
flex-shrink: 0;
}
.playlist-box h3::after {
content: '';
width: 70%;
height: 1px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 100vmax;
display: block;
margin: 1em auto;
}
#playlist {
display: grid;
width: 100%;
padding: 1em;
overflow-y: scroll;
scroll-behavior: smooth;
}
#playlist li {
margin-bottom: 1rem;
width: 100%;
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0);
}
#playlist li:hover,
#playlist li:focus {
background-image: linear-gradient( 135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: var(--shadow-default);
border-radius: 0.5rem;
}
.song-title {
margin-bottom: 0.5em;
}
.vid-thumb {
width: 100%;
/* object-position: center;
object-fit: cover; */
}
.video-container {
align-self: flex-start;
padding: 1em;
}
#song-frame {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%;
}
#song-frame iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="main-container">
<main>
<aside class="weather-box glass">
<div id="forecast">
<img id="weather-icon" src="http://openweathermap.org/img/wn/02d#4x.png" alt="Weather Icon" />
<span id="forecast-desc">(--)</span>
</div>
<div class="weather-details">
<div id="temp">
<span id="temp-num">0°c</span>
<span id="feels-like">feels like 0°c</span>
</div>
<div id="humidity">
<span id="humid">Humidity</span>
<div id="humid-value">
<span id="humid-num">0%</span>
</div>
</div>
</div>
</aside>
<div class="video-container glass">
<div id="song-frame">
<iframe src="https://www.youtube.com/embed/oG08ukJPtR8" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="1024" height="576" frameborder="0"></iframe>
</div>
</div>
<aside class="playlist-box glass">
<h3>Browse Playlist:</h3>
<ul id="playlist">
<li>
<h4>Song Title</h4>
<img class="vid-thumb" src="https://i.ytimg.com/vi/ru0K8uYEZWw/hqdefault.jpg" alt="" />
</li>
<li>
<h4>Song Title</h4>
<img class="vid-thumb" src="https://i.ytimg.com/vi/pkCyfBibIbI/hqdefault.jpg" alt="" />
</li>
</ul>
</aside>
</main>
</div>
I applied to both <aside> elements to have a responsive width with the following width: clamp(13.5rem, 18%, 20rem). The div in the center uses the rest of the available width of the viewport. Generally, the layout kinda works.
The weather-container's clamp works just fine. The playlist-container though is able to shrink to less than 13.5rem (216px) and in some screen sizes I'm left with uneven containers in the sides.
The interesting part is that problem is somehow connected to the <img> thumbnails. The set width for them is 100%. If I cancel it out, the container behaves correctly but the thumbnails are cut off.
setting a fixed width value doesn't work.
setting a min-width to the element doesn't work.
setting flex-shrink: 0; to the element doesn't work.
messing with flex-basis also didn't work for me.
changing the <img> to a <div> with background-image instead produces the same result.
Would love to get over this problem, thank you.
Edit: I've produced a CodePen which recreates the problem: https://codepen.io/xandertem/pen/XWZLaVR
Try going to responsive mode and see the right section shrinking around <560px.
Adding flex-shrink: 0 to the aside (.playlist-box) solves the problem.
You should probably add the same rule to the other aside (.weather-box), even though you don't need it, just in case the type of content in that container ever changes. As you can see, images and videos make a difference.
For reasons I don't understand clamp in the width setting of flex just does not seem to work.
Also to automatically have the two asides with the height of the middle item you could use grid.
To get round what seems to be the clamp problem this snippet separates out the ranges by using min and max width media queries [when 18% is 13.5rem the overall width is 75rem and so on).
* {
box-sizing: border-box;
}
main {
display: grid;
grid-template-columns: 18% 1fr 18%;
width: 100vw;
}
#media screen and (max-width: 75rem) {
main {
grid-template-columns: 13.5rem 1fr 13.5rem;
}
}
#media screen and (min-width: 111.111rem) {
main {
grid-template-columns: 20rem 1fr 20rem;
}
}
main {
padding: 0 1rem;
gap: 2rem;
}
.weather-container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding: 0 1em 1em 1em;
}
.video-container {
padding: 1em;
}
.playlist-container {
display: flex;
align-items: center;
flex-direction: column;
padding: 1rem 0.5em;
}
.vid-thumb {
width: 100%;
/* object-position: center;
object-fit: cover; */
}
<main>
<div class="weather-container">
...divs...
</div>
<div class="video-container">
<div>
<iframe>...</iframe>
</div>
</div>
<div class="playlist-container">
<h3>Browse Playlist:</h3>
<ul>
<li>
<h4>Song Title</h4>
<img class="vid-thumb" src="https://i.ytimg.com/vi/example.jpg" alt="">
</li>
<li>etc...</li>
</ul>
</div>
</main>
I have two buttons that have different width values because the content is different. My desire result is to have the same width on both buttons.
Fiddle
HTML:
<div class="options ion-text-center">
<div class="option-container" (click)="newScenario()" style="cursor: pointer;">
<div class="option">
<img src="assets/icons/scenario.svg" class="option-icon">
<label class="option-text">Create scenario</label>
</div>
</div>
<div class="option-container" (click)="goToHistory()" style="cursor: pointer;">
<div class="option">
<img src="assets/icons/scenario.svg" class="option-icon">
<label class="option-text">History</label>
</div>
</div>
</div>
CSS:
.options {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 15em;
margin-top: 6em;
grid-template-columns: auto auto;
justify-items: center;
float: right;
.option-container {
width: 100%;
text-align: center;
display: flex;
border-radius: 12px;
justify-content: right;
.option {
background-color: #49515C;
// width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem 2rem;
border-radius: 12px;
filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.4));
.option-icon {
filter: invert(100%) sepia(4%) saturate(7500%) hue-rotate(180deg) brightness(109%) contrast(122%);
width: 45px;
height: 45px;
}
.option-text {
font-size: 20px;
font-weight: 600;
color: #ffffff;
padding-left: 10px;
font-family: "Exo 2", sans-serif;
}
}
}
.option-container:nth-child(2) {
justify-content: left;
}
}
The first thing I try is to set option class to width: 100%; but both buttons get bigger and I want to keep the current "Create Scenario" button.
My second try was to adjust "History button" as &__justify-content {width: 41%;} but this does not work on responsive layout.
How can I achieve this?
I think you're looking for this two css properties:
overflow: hidden;
white-space: nowrap;
I have a Popular News section where I'm trying to display six news articles in a flex pattern. The problem I'm having is that I cannot get the flex items to be closer together. How do I do that?
EDIT: I've added the entire code for the bottom half.
This is how it currently looks:
This is how I want it to look:
.firstsection {
width: 100%;
height: 100;
}
.firstsection h1 {
color: rgb(255, 255, 255);
display: block;
font-size: 36px;
font-weight: 300;
line-height: 42.0001px;
padding-bottom: 14px;
text-align: center;
}
.firstsection {
display: block;
width: 100%;
height: 400px;
background-color: #414141;
float: left;
}
.bottomheader {
margin-top: 40px;
color: white;
font-size: 40px;
position: relative;
top: -20px;
}
.READMORE {
display: inline;
position: relative;
top: -40px;
left: 642px;
font-size: 16px;
text-align: center;
border: 1px solid white;
height: 50px;
padding: 20px;
}
.pop .READMORE a {
color: white;
text-decoration: none;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
color: black;
width: 30%;
border-top: 3px solid red;
background-color: white;
height: 80px;
}
.firstsection {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.pop {
float: right;
height: 100px;
width: 100%;
text-align: center;
}
<section style="background-color: #293352" class="pop">
<h1 class="bottomheader">Popular News</h1>
<h4 class="READMORE">READ MORE</h4>
</section>
<section style="background-color: #293352" class="firstsection">
<h3 class="h1">content</h3>
<h3 class="h2">content</h3>
<h3 class="h3">content</h3>
<h3 class="h4">content</h3>
<h3 class="h5">content</h3>
<h3 class="h6">content</h3>
</section>
All you really need to do is add align-content: flex-start. This aligns wrapped lines to the start of the flex container and has similar options as align-items. See align-content
I created a fiddle
.firstsection {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: flex-start;
}
In this example I changed the 'cards' to divs and used a card class, and added a little padding. This may or may not be what you want but maybe it helps.
You can use the CSS GRID to align them properly.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.firstsection {
display: block;
width: 100%;
background-color: #293352;
padding: 50px 20px;
}
h3 {
color: black;
width: 100%;
border-top: 3px solid red;
background-color: white;
height: 130px;
margin: 0;
}
.firstsection {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
<section class="firstsection">
<h3>content</h3>
<h3>content</h3>
<h3>content</h3>
<h3>content</h3>
<h3>content</h3>
<h3>content</h3>
</section>
Codepen: https://codepen.io/manaskhandelwal1/pen/XWjobLx
here is another approach with grid , using pseudo elements to shrink the visible rows to the center, and sizing a few elements via width and max-width:
example below to run in fullpage mode then resize the window to see if the behavior is what you expect.
body {
margin: 0;
background-color: #293352;
}
.grid {
display: grid;
grid-template-rows: auto 1fr;
min-height: 100vh;
}
.pop {
color: white;
text-align: center;
position: relative;
padding: 1em 10em;
}
.pop h4 {
position: absolute;
right: 1rem;
top: 0.5rem;
border: solid 1px;
padding: 1em;
}
section.firstsection {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr repeat(auto-fill, max-content) 1fr;
align-items: center;
width: max-content;
max-width:100%;
margin: auto;
gap: 1em;
}
.firstsection:before,
.firstsection:after {
content: "";
grid-column: span 3;
}
.firstsection > * {
box-sizing: border-box;
min-width: 26%;
background: white;
height: 100%;
padding: 1em;
border-top: solid red;
max-width:30vw;
}
<div class="grid">
<section class="pop">
<h1 class="bottomheader">Popular News</h1>
<h4 class="READMORE">READ MORE</h4>
</section>
<section class="firstsection">
<h3 class="h1">content</h3>
<h3 class="h2">content</h3>
<h3 class="h3">content</h3>
<h3 class="h4">content <br> and an extra line</h3>
<h3 class="h5">content</h3>
<h3 class="h6">content or grow the column to my width if there's enough room.</h3>
</section>
</div>
here is a codepen with a grid of 9 boxes to play with : https://codepen.io/gc-nomade/pen/dypwYvY
I have a Grid Layout that has three rows: a Header, Content and Footer. Within my Header row I created a dropdown login box to replace my current login form. The problem is the box gets cut off or does not display over the Grid Layout Content row. It only displays within the Header row, so I only see a part of it as the dropdown login is to large to only fit within the Header row.
* {
margin: 0;
padding: 0;
}
body {
font-family: Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
background-color: #3399FF;
font-size: 1rem;
font-weight: 400;
color: #858796;
}
/*-- Main grid view --*/
.main-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas: "header header" "content content" "footer footer";
}
.header {
grid-area: header;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
background-image: url(../img/image1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.content {
grid-area: content;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
background-image: url(../img/image2.png);
background-size: cover;
background-repeat: no-repeat;
background-position: 5% 5%;
border-radius: 4px;
}
.login-dropdown {
display: block;
float: right;
color: white;
text-align: center;
text-decoration: none;
}
.login-dropdown-content {
position: absolute;
width: 300px;
height: 100px;
right: 100px;
top: 52px;
background-color: #fff;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 1px;
}
.dropdown-arrow {
width: 0;
height: 0;
position: absolute;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #fff;
right: 29px;
top: 42px;
}
.footer {
grid-area: footer;
display: grid;
grid-template-columns: 1fr 30% 1fr;
grid-template-rows: auto;
grid-template-areas:
"login-footer-grid login-footer-grid login-footer-grid"
}
.login-footer-grid {
grid-area: login-footer-grid;
align-self: center;
max-height: calc(100vh + 10px);
left: 1%;
right: 1%;
font-family: Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
font-size: 1rem;
font-weight: 200;
color: #FFFFFF;
margin-right:auto;
margin-left:auto;
bottom: 0;
}
.login-topnav {
list-style-type: none;
position: relative;
margin: 0;
padding: 2px 0 1px 0;
overflow: hidden;
display: block;
background-color: rgb(50,53,57,0.2); /*rgb(199,221,113,1); */
}
li a {
display: block;
color: white;
text-align: center;
padding: 20px 28px 20px 28px;
text-decoration: none;
}
.login-form {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width: 400px;
height: 300px;
padding: 50px 20px 30px 20px;
background-color: rgb(15,15,15,0.6);
border-radius: 4px;
}
.login-form h2 {
margin: 0;
padding: 0 0 20px;
color:#fff;
text-align: center;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
/* Hover styles */
li a:hover {
background-color: #FF7104;
}
<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="./css/test.css">
</head>
<body>
<!-- Main grid layout -->
<div class="main-grid">
<!-- First grid row -->
<div class="header">
<!-- Logo containing navbar-->
<ul class="login-topnav">
<!-- New Dropdown user login element on navbar -->
<li class="login-dropdown">
<a class="btn btn-primary"><i class="fa fa-user fa-fw"></i>Login</a>
<div class="dropdown-arrow"></div>
<div class="login-dropdown-content">
<form>
<input type="text" placeholder="Username.." name="unam" id="unam" required>
<input type="text" placeholder="Password.." name="pwd" id="pwd" required>
</form>
</div>
</li>
</ul>
</div>
<!-- Second grid row -->
<div class="content">
<!-- Login form to replace -->
<div class="login-form animate" >
<form action= "" method="post">
</form>
<form action= "" method="post">
</form>
</div>
</div>
<!-- Third grid Row -->
<div class="footer">
</div>
</body>
</html>
I tried setting a z-index for the .login-dropdown-content, but it did not help.
Can someone please point me in the right direction as to how to solve this?
You have overflow: hidden in .login-topnav which hid the overflowed dropdown.
Removing the overflow property and giving it a fixed height should help:
Fiddle: https://jsfiddle.net/q9c3hxgm/
I'm trying to use CSS grid to position div tags and input fields within them. The piece that keeps failing is the vertical-alignment. I have tried many suggestions made in the online forums but nothing works. It's important for me to align the input fields towards the bottom of a div tag. I would greatly appreciate any help.
I have tried vertical-align="bottom" within the immediate div in which input is included and also with the input tag itself.
I have tried using position="absolute" with bottom="0".
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: helvetica;
font-size: 36px;
color: white;
}
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: [open-paren] 0.5fr [atomic-symbol]1.0fr;
width: 25%;
padding: 3px;
border: 3px solid teal;
border-radius: 5px;
}
.item {
background-color: teal;
border-radius: 5px;
border: 3px solid teal;
height: 100px;
vertical-align: bottom;
}
.item:nth-child(1) {
grid-row: 1/5;
grid-column: open-paren;
text-align: right;
}
.item:nth-child(2) {
grid-row: 4/9;
grid-column: atomic-symbol;
}
</style>
</head>
<body>
<section class="container">
<div class="item">
<p vertical-align="text-bottom">Open</p>
</div>
<div class="item">
<input type="text" vertical-align="bottom">
</div>
</section>
</body>
</html>
Any element included inside a div tag aligned closet to the bottom of it.
I do not know if I understood correctly but this is positioning the input down the div.
* {
padding: 0;
margin: 0;
}
body {
font-family: helvetica;
font-size: 36px;
color: white;
}
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: 0.5fr 1fr;
width: 50%;
padding: 3px;
border: 3px solid teal;
border-radius: 5px;
}
.item {
display: grid;
align-items: end;
height: 100px;
border-radius: 5px;
border: 3px solid teal;
background-color: teal;
}
.item p {
text-align: right;
}
<section class="container">
<div class="item">
<p>Open</p>
</div>
<div class="item">
<input type="text">
</div>
</section>