I have a webpage and I have the "body" wrapped around all my content. But when I do this webpage responsive and want the body to enlarge the web content the body stops enlarge the content vertically. It do enlarge the content when I increase the width but not vertically. I don't want the extra black area.
body {
background-color: black;
padding-bottom: 10vh;
padding-top: 10vh;
padding-right: 10vh;
padding-left: 10vh;
margin: 0;
height: 100%;
align-content: center;
justify-content: center;
position: relative;
}
#wrapper {
position: static;
align-items: center;
height: 100%;
width: 100%;
align-content: center;
display: flex;
flex-direction: row;
margin: 0 auto;
justify-content: center;
overflow: auto;
}
#wrapper2 {
align-items: center;
width: 100%;
height: 100%;
align-content: center;
display: flex;
flex-direction: row;
margin: 0 auto;
justify-content: center;
overflow: auto;
}
img {
width: 100%;
height: 100%;
display: block;
}
.cell1 {
width: calc(100% / 3);
text-align: center;
background-size: contain;
height: 100%;
background-position: center;
position: relative;
}
.cell2 {
width: calc(100% / 3);
text-align: center;
background-size: contain;
height: 100%;
background-position: center;
position: relative;
}
.cell3 {
width: calc(100% / 3);
text-align: center;
background-size: contain;
height: 100%;
background-position: center;
position: relative;
}
.dogname {
color: white;
top: 20px;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
position: absolute;
width: 100%;
margin: 0;
}
.dogtext {
color: white;
top: 0;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
position: relative;
width: 100%;
margin-bottom: 30px;
margin-top: 0px;
display: none;
}
#media screen and (max-width: 500px) {
#wrapper {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
#wrapper2 {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.cell1 {
width: 100vw;
}
.cell2 {
width: 100vw;
}
.cell3 {
width: 100vw;
}
.dogname {
display: none;
}
.dogtext {
display: block;
}
body {
background-color: black;
height: 100%;
padding: 0;
margin: 0;
}
}
<body>
<div id="wrapper">
<div class="cell1">
<p class="dogname">David Neal</p>
<img src="images/image1.jpg" />
</div>
<p class="dogtext">After the hunt (1870) by David Neal</p>
<div class="cell2">
<p class="dogname">BG Tiepolo</p>
<img src="images/image2.jpg" />
</div>
<p class="dogtext">Portrait of a Toy Spaniel Belonging to the Infanta Maria Josefa of Bourbon (1763) by Giovanni Battista Tiepolo</p>
<div class="cell3">
<p class="dogname">AF Desportes</p>
<img src="images/image3.jpg" />
<p class="dogtext">Chienne blanche devant un buisson de sureau (1714) by Alexandre-François Desportes</p>
</div>
</div>
<div id="wrapper2">
<div class="cell1">
<p class="dogname">JC Merck</p>
<img src="images/image4.jpg" />
<p class="dogtext">Ulmer Dogge (1705) by Johann Christof Merck</p>
</div>
<div class="cell2">
<p class="dogname">John Wootton</p>
<img src="images/image5.jpg" />
<p class="dogtext">A Grey Spotted Hound (1738) by John Wootton</p>
</div>
<div class="cell3">
<p class="dogname">EH Landseer</p>
<img src="images/image6.jpg" />
<p class="dogtext">A Distinguished Member of the Humane Society (1838) by Edwin Henry Landseer</p>
</div>
</div>
</body>
It really depends on what do you want to achieve, but generally, you can use media queries for height and combine them with the ones for width.
#media screen and (max-width: 800px) , screen and (max-height: 600px) {
...
}
By default, your webpage is vertically scaled based on the height of the content. To always have it at least be one viewheight high, you can insert this rule into your css:
html, body {
min-height: 100vh;
}
Related
I have a main container that contains an image and a div. What I want to achieve is to center the div on top of the image without having to use absolute or relative positioning on it. How can I achieve this? Thanks in advance.
.imgCon {
display: flex;
width: 95%;
height: 95%;
margin: auto;
background-color: blue;
}
.imgCon img {
width: 95.5%;
height: 95%;
margin: auto;
border-radius: inherit;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 30%;
height: 30%;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
}
<div class="imgCon">
<!--center this-->
<div class="iconCon">
C
</div>
<img src="https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg" />
</div>
The only way I can think of without using absolute positioning or changing your markup is to use a CSS Grid and make both elements occupy the same cell.
.imgCon {
display: flex;
width: 95%;
height: 95%;
margin: auto;
background-color: blue;
display: grid;
}
.imgCon img {
width: 95.5%;
height: 95%;
margin: auto;
border-radius: inherit;
grid-column-start: 1;
grid-row-start: 1;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 4rem;
height: 4rem;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
grid-column-start: 1;
grid-row-start: 1;
}
<div class="imgCon">
<img src="https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg" />
<!--center this-->
<div class="iconCon">
C
</div>
</div>
You could use background-image property and tiny styling changes.
.imgCon {
display: flex;
justify-content: center;
align-items: center;
width: 20rem;
height: 20rem;
margin: auto;
background-color: blue;
background-image: url("https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 80%;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
height: 3rem;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
}
.container {
display: flex;
justify-content: center;
align-item: center;
}
<div class="imgCon">
<div class="container">
<!--center this-->
<div class="iconCon">
C
</div>
</div>
</div>
I wan't to add a p like this.
I can add it, but when I use margin-top to put it down, it affects the elements above like this.
I don't know how to solve this.
Thank you.
HTML.
<main>
<section class="home">
<div class="presentation">
<p class="hello">HELLO THERE</p>
<p>I'm Lautaro Rojas</p>
<p>Web developer</p>
<p class="scroll">SCROLL DOWN</p>
</div>
<div class="presentation-buttons">
<button>LATEST PROJECTS</button>
<button>MORE ABOUT ME</button>
</div>
</section>
</main>
CSS:
main {
width: 100%;
height: 100%;
.home {
width: 100%;
height: 100%;
background-image: url("../img/bg.jpg");
background-size: cover;
display: flex;
align-items: center;
.presentation {
width: 70%;
height: 100%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
gap: 5px;
p {
width: 50%;
margin: 0;
text-align: left;
color: $WHITE;
font-family: Merriweather-Regular;
font-size: 70px;
letter-spacing: 2px;
}
p[class="hello"] {
font-size: 30px;
color: $PINK;
}
p[class="scroll"] {
margin-top:180px;
font-size: 10px;
}
}
}
}
position: absolute; is your friend...
<main>
<section class="home">
<div class="presentation">
<p class="hello">HELLO THERE</p>
<p>I'm Lautaro Rojas</p>
<p>Web developer</p>
<p class="scroll">SCROLL DOWN</p>
</div>
<div class="presentation-buttons">
<button>LATEST PROJECTS</button>
<button>MORE ABOUT ME</button>
</div>
</section>
</main>
main {
width: 100%;
height: 100%;
.home {
width: 100%;
height: 100%;
background-image: url("../img/bg.jpg");
background-size: cover;
display: flex;
align-items: center;
.presentation {
width: 70%;
height: 100%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
gap: 5px;
position: relative;
p {
width: 50%;
margin: 0;
text-align: left;
color: $WHITE;
font-family: Merriweather-Regular;
font-size: 70px;
letter-spacing: 2px;
}
p[class="hello"] {
font-size: 30px;
color: $PINK;
}
p[class="scroll"] {
margin-top:180px;
font-size: 10px;
position: absolute;
}
}
}
}
I am trying to make the following webpage responsive but when I adjust the screen height the logo image gets cut as I decrease the height of the screen.
I am unable to find the common ground where I can set the logo image as full view and set some padding around the logo so that it doesn't get stuck to the top screen.
Below is the GIF image that describes the issue:
body {
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
img {
height: 5em;
width: 5em;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}
div {
background-color: #FFF;
padding: 2em;
}
<section>
<img src="https://i.postimg.cc/G3WCmqLQ/icon.png">
<div>
<h1>Welcome</h1>
</div>
</section>
What you need to do is just change css of body from display: flex; to display: inline-grid;. Hope this will solve your issue.
body {
background-color: black;
display: inline-grid;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
img {
height: 5em;
width: 5em;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}
div {
background-color: #FFF;
padding: 2em;
}
And HTML is;
<section>
<img src="https://i.postimg.cc/G3WCmqLQ/icon.png">
<div>
<h1>Welcome</h1>
</div>
</section>
Add height: 100% to section
body {
background-color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
section {
height: 100%;
}
img {
height: 15em;
width: 15em;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}
div {
background-color: #FFF;
padding: 2em;
}
<section>
<img src="https://dummyimage.com/300">
<div>
<h1>Welcome</h1>
</div>
</section>
im a bit lost:
im trying to make the space between 3 divs (horizontally) 40px, but it doesnt seem to work when i do it:
https://github.com/itsolidude/Tea_Cozy
i want the yellow marked parts to be 40px:
html {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
width: 100%;
z-index: 2;
background-color: black;
top: 0;
}
#locations h2 {
flex: 1 0 100%; /* shorthand for: flex-grow:1;
flex-shrink: 0;
flex-basis: 100%; */
text-align: center;
position: absolute; /* found this to be a simpler solution, and i sticked with it even tho i dont have exact 10px :p */
top: 1510px;
z-index: 3;
}
img {
height: 50px;
padding-left: 10px;
}
nav span {
color: seashell;
padding-right: 30px;
}
.mission-banner {
background-color: black;
}
.mission-banner h4 {
padding-bottom: 10px;
}
a {
cursor: pointer;
text-decoration-color: seashell;
}
#mission {
background-image: url(../images/img-mission-background.jpg);
position: relative;
margin: 70px auto 0;
width: 1200px;
height: 700px;
display: flex;
flex-direction: column;
justify-content: center;
}
#tea-of-month {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 1000px;
margin: 0 auto 70px;
}
#tea-of-month img {
height: 200px;
width: 300px;
margin-bottom: 10px;
}
.item {
display: flex;
flex-direction: column;
padding: 10px;
}
.contact {
height: 200px;
}
#locations {
height: 500px;
width: 1200px;
margin: 0 auto;
background-image: url(../images/img-locations-background.jpg);
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.address {
background-color: black;
width: 300px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 1;
}
#copyright {
text-align: left;
margin-left: 20px;
}
<div id="locations">
<h2>Locations</h2>
<div class="address">
<h3>Downtown</h3>
<p>384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</div>
<div class="address">
<h3>East Bayside</h3>
<p>3433 Phisherman's Avenue</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</div>
<div class="address">
<h3>Oakdale</h3>
<p>515 Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland, Maine</p>
</div>
</div>
i put in the whole css. just in case something is affecting it. Pls explain what and why you did it :p
Don't use justify-content: space-between; as this will allot space depending on the available space.
Instead, center the flex-children and give them side margin of 20px (2 * 20px = 40px).
.wrap {
display: flex;
justify-content: center;
width: 90%;
margin: auto;
border: 1px solid grey;
}
.box {
background: #000;
width: 150px;
height: 150px;
margin: 20px;
}
<div class="wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Alternatively, you could set a max-width of the parent container, thus making less available space for the children to spread out with the space-between style.
I would like to make this div responsive and keep the text in the center of it the entire time. As of now, it looks fine on mobile since I added media queries to it, but on desktop the p element in my .info-p-div goes into the div below and looks awful. These divs are side-by-side on the page. I will post my HTML and CSS code relating to this section of the page so you can see what I mean.
HTML
<div class="info">
<div class="info-img-div">
<img src="images/owner.jpg" />
<p><font color="#F5F5F5">Text here</font></p>
</div>
<div class="info-p-div">
<p><font color="#F5F5F5">Text here</font></p>
</div>
</div>
<div class="parallax-3"></div>
CSS
.info {
text-align: center;
min-height: 250px;
width: 100%;
background-color: #000;
}
.info-img-div {
position: left;
width: 35%;
border-right-style: solid;
border-color: #F5F5F5;
}
.info-img-div img {
border-radius: 50%;
height: 25%;
width: 25%;
min-height: 100px;
min-width: 100px;
margin-top: 20px;
}
.info-p-div {
height: 25%;
width: 50%;
max-width: 65%;
text-align: center;
position: relative;
float: right;
font-size: 12px;
word-wrap: break-word;
vertical-align: middle;
}
.parallax-3 {
background-image: url("images/background3.jpg");
height: 400px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#media only screen and (max-width: 600px) {
.info {
text-align: center;
float: none;
height: 50%;
}
.info-img-div {
float: none;
border-right-style: none;
position: relative;
width: 100%;
}
.info-p-div {
float: none;
text-align: center;
width: 100%;
max-width: 100%;
}
}
I think you are looking for below solution.
I posted an working example.
.box {
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
width: 100%;
height: 300px;
background: tomato;
}
.box p {
flex: 1 0 0;
text-align: center;
}
#media screen and (max-width:600px) {
.box {
flex-direction: column;
}
.box p {
display: flex;
justify-content: center;
align-items: center;
}
}
<div class="box">
<p>One</p>
<p>Two</p>
</div>