I have a div I want to fill entirely with a background image. The salmon color should be not be shown. How do I get this image to "zoom to fit"? I've tried various methods such as background-size: 100% 100% and flexbox.
https://codepen.io/2spacemilk/pen/zYKWLyM
.this-div {
background-color: salmon;
display: flex;
flex-direction: column;
align-items: center;
background-image: url('https://i.imgur.com/6aRX4Hh.png');
background-size: cover;
}
.payment-methods-strip {
background-color: #fff;
max-width: 438px;
border-radius: 40px;
padding: 10px 20px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
}
The problem appears to be that your background image has transparent space on its top. Thus, the image is being displayed, it's just being pushed down by the extra invisible space. Could you try removing the extra space from the image (using an image editor)? If not, you can try to use background-position to manually position it to the top.
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 8 days ago.
I want to make all my content/elements in tag to be centered of the browser or viewport.
I did this initially:
body {
background-color: hsl(212, 45%, 89%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
But my is not at the center vertically. You can refer here for the image.
However, after I added height: calc(100vh - 1px); to my code, then only it will be at the center of the browser/viewport perfectly.
Full code:
body {
background-color: hsl(212, 45%, 89%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: calc(100vh - 1px);
}
You can referhere for the image and can see the content is in the center now.
My understanding is, with display:flex, justify-content: center, align-items: center, I would be able to make all the child elements to be centered. Obviously, my understanding is wrong.
Can anyone explain this?
Thank you in advance!
Height of <body> depends on its content, that's why your trick won't work until you make it the same height as the viewport (-1px to avoid scrollbar I guess). Give a background colour to <body> and you will see.
I have to display some item card. Each card has min-width property. When my screen size change, card size also changed. Because of that, I am facing a problem. That is, the last item/items takes whole area. Is it possible to keep a minimum width for each card, though it is last item or not? Please help.
Problem:
Attempt:
Please find in codesandbox: https://codesandbox.io/s/multiple-items-arrange-926fx
It sounds like you also want to specify a max-width for your cards.
In your example it could simply be:
const Container = styled.div`
flex: 1;
margin: 5px;
max-width: 300px;
min-width: 280px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f5fbfd;
position: relative;
&:hover ${Info} {
opacity: 1;
}
`;
You can of course also leave max-width: 280px if you don't wish to change the width of the elements at all.
Additionally you can add justify-content: flex-start to the container to make it look less weird on resizes. In your example:
const Container = styled.div`
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
`;
I'm trying to recreate a math game for a University project with HTML CSS and JS. During the layout, my flexbox items are going outside their container. I gave them a thick border so it is easier to see what is happening. I'm trying to design it first for mobile as I show in the picture below.
See the screenshot here
.container {
display: flex;
flex: 1;
flex-flow: column wrap;
justify-content: center;
align-items: center;
margin: 1em;
border-width: 5px;
border-style: solid;
border-color: red;
}
.flex-item {
align-items: center;
justify-content: center;
border-width: 5px;
border-style: solid;
border-color: rgb(0, 255, 64);
}
Here is the full code in codepen
What I'm doing wrong?
The issue is the gap in your grid. You need to account for the 0.5em padding added on both sides of your element. To do this, you can use the CSS calc method. Set the width of .answer-options to calc(100% - 1em);, 1em being what you get when you add the .5em and .5em on either side of your grid. You're subtracting that 1em from the 100% width.
in .container I changed margin to padding and the problem got resolved.
I cant get this too work. Im using react and styled components and my justify/aligning isnt working.
div - set to flex, flex-direction is column
div - header div
div - body div, flex grow set to 1 so that the flexbox takes up the full height of the container
Now the flex item for the body takes up the full height (good) and im trying to center the content in the middle of this div. I have tried all combinations of align/justify on both the parent and body div but it doesnt work and im not sure why.
Heres my code
const Div = styled.div`
display: flex;
flex-direction: column;
min-height: 100vh;
justify-items: center;
& > * :nth-child(2){
flex-grow: 1;
background-color: red;
/* position:relative; */
/* align-self: center; */
}
`
const OuterWrapper = styled.div`
padding: 10vw 1.5rem;
overflow: hidden;
// this is the div that contains content that i want to center
Can anyone see why its not working?
On your wrapper:
display: flex;
justify-content: center;
align-items: center;
I made a website using an HTML5 template and adjusting it. Everything worked fine so far (apart from probably having messy files).
Now, my issue:
I am using a parallax background image inside a section-element, and it is not responsive on mobile. If I resize my browser window, it works fine. But if I look at the actual size on my smartphone screen, it's not working.
This is the code I used in my CSS-file. I tried to do it with code that I found in this community and merged it with what was already inside the template.
.wrapper.rechtsgebiete {
background-color: #ffffff;
color: rgba(255, 255, 255, 0.75);
padding: 10em 0 6em 0 ;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
background-attachment: fixed;
background-color: rgba(51,153,255, 0.80);
background-image: url(../../images/la-rechtsgebiete.jpg);
background-position: top left;
background-size: cover;
border: none;
min-height: 50vh !important;
position: relative;
text-align: center;
width: 100%;
}
This is the HTML-element:
<section id="rechtsgebiete" class="wrapper rechtsgebiete" style="padding-top: 30vh; padding-bottom: 25vh;">
<div class="inner"><center>
<h1 class="font-volkhov2"><span style="color:white;">Services & Rechtsgebiete</span></h1></center>
</div>
</section>
Here you can see the issue; the first header-image works fine, everything else doesn't: http://lexadvice.de/leistungen.html
How can I solve this issue?
I tried changing the position value, but I guess it might have something to do with the width-property. Trial and error did not get me far this time.
I solved the issue with setting the background on scroll. Now the images are displaying correctly on iPhone.
background-attachment: scroll;
Thanks for your help #Akash Shrivastava.
One of the media style rules is overriding the background-attachment: fixed; in file: leistungen-banner.css
#media screen and (max-width: 1280px)
#banner {
padding: 6em 0 3em 0;
background-attachment: scroll;
}
}
that's why its not working on mobile. Please fix that.
Alternatively you can add and inline rule background-attachment:fixed to your #banner element.
Refer below screenshot (taken from chrome dev tools):