This footer has a flexcontainer (id="footerline") whose flex-wrap property is set to wrap. The container contains two divs (class="footerbutton"). When wrapping takes place on small screens, the second container moves to a new line, but the container's height does not adjust, so the two lines overlap. I could fix this by removing the padding of the buttons in the two divs, but this is clearly not what I would like to do.
So what can I do to make sure the flexcontainer has just the right height after wrapping (and before wrapping, too, of course, but that is not the problem)? Setting the height of the container to something like 100px is not an option as I wish the container to be just high enough to contain the content, be it wrapped or not.
I have studied numerous other questions about similar situations and their answers, but all my experiments that resulted from this did not help in my case.
Thank you.
Malte
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
#footerline {display:flex; justify-content: space-around; flex-wrap: wrap;
padding: 20px; width: 100%; background: #132a40}
.footerbutton a {color:whitesmoke; padding: 20px; margin-left:10px;
text-decoration: none; background-color: green}
</style>
</head>
<body>
<footer>
<div id="footerline">
<div class="footerbutton">
Imprint -- Cookies -- Privacy
</div>
<div>
<nav class="footerbutton">
English
Swedish
German
</nav>
</div>
</div>
</footer>
</body>
</html>
Please use footer bottom in css for Footerbutton
if you dont needed in Webview just add it in Media query.
.footerbutton a {
color: whitesmoke;
padding: 20px;
margin-left: 10px;
text-decoration: none;
background-color: green;
margin bottom: 50px;
}
if not needed in WebView place that Marginbottom in media query
Check there are full code display: flex issues here. if you want space in a mobile device add media query for mobile.
#footerline {
display:flex;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
background: #132a40;
}
.footerbutton{
display:flex;
}
.footerbutton a {
color:whitesmoke;
padding: 20px;
margin-left:10px;
text-decoration: none;
background-color: green;
}
#footerline > div {
display: flex;
}
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<footer>
<div id="footerline">
<div class="footerbutton">
Imprint -- Cookies -- Privacy
</div>
<div>
<nav class="footerbutton">
English
Swedish
German
</nav>
</div>
</div>
</footer>
</body>
</html>
I looked after your code. From what I understood your approach to flex is not working right.I would suggest to add a property min-height say min-height:200px to your main footerline div. Also the flex is wrapping only the two div elements inside footer. You need to need display:flex and flex-wrap:wrap to both the div elements inside your footerline div. Try this solution I hope this helps.
Try this it is working for you
#footerline > div {
display: flex;
}
Related
I'm coding this website as the last project of the HTMl course on freecodecamp, and I'm running into two errors I don't know how to fix.
On the one hand, a small white line stays between my navbar and my first section.
On the other hand, I use a hover selector to make the background of my nav bar links gray, but a small darker line stays at the bottom.
Here is what the white line looks like:
To fix the first white line, I've tried removing paddings and margins (which removed some of the whitespaces on the edges, but not the one that's left, between the two sections. I also changed all the CSS backgrounds to blue to find out which section was filling in the space, and it only turned blue when I changed body's background, which already has margins and padding set to 0.
Here is what the little black line looks like:
As you can see, there is a little black line below the grey background!
For this one I tried understanding what exact space the different tags in my navbar take (li, ul, a...) to no avail, I don't really understand how these tags decide to take up space, or not within the navbar. I couldn't find any of the tags that took that extra black line space.
Here is the HTML:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Double Team Cooking</title>
<link rel='stylesheet' href='styles.css'>
</head>
<body>
<section id="welcome">
<nav id='navbar'>
<ul>
<li>Who Am I?</li>
<li>My Projects</li>
<li>Contact</li>
</ul>
</nav>
</section>
<section id='Who-Am-I'>
<h2 id='whodis'>Who Am I?</h2>
<p> Hey, I'm Pedro.</p>
<p> A man, a cook, a student, a coder, a business developer, a problem solver.</p>
</section>
<section id='Projects'>
<h2 id='Projectos' class="project-title">My Projects</h2>
<p>So, what am I working on?</p>
<div id="electriccar"></div>
<div id="website"></div>
<div id="TWR"></div>
</section>
<section id="Contact">
<h2 id="hola">Contact Me</h2>
<p>You'd like to reach out? Of course! Feel free to reach out to me through these mediums!</p>
</section>
</body>
</html>
And here is the CSS:
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
width: 100%;
padding: 0px;
margin: 0px;
}
nav {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
height: 40px;
background-color: rgb(24,24,24);
}
nav ul {
display: flex;
justify-content: space-evenly;
list-style-type: none;
padding-left: 0px;
width: 100%;
height: 100%;
margin: 0px;
align-items: center;
}
nav li {
display: inline-block;
}
li a {
text-decoration: none;
color: white;
padding: 10px;
}
li a:hover {
background-color: rgb(64,64,64);
}
#Who-Am-I {
height: 100%;
background-color: rgba(0,30,0,0.8);
}
Thanks a lot for the help!
Try
* {
padding: 0;
margin: 0;
}
Right now I'm coding a menu that has a two column layout. This is the code.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</body>
</html>
CSS:
.stockapps {
background-color: #111;
float: left;
width: 5%;
height: 100%;
}
.stockapps :after {
content: "";
display: table;
clear: both;
}
.stockapps img{
width:100%;
display: inline;
vertical-align: top;
}
.main {
float: left;
padding: 2%;
width: 91%;
overflow: hidden;
}
The issue is that the stockapps div tag is not filling the whole screen with height instead opting to only fill the area the children objects take up.
I have tried using the clear-fix and setting overflow to hidden but neither seem to fix the issue. Its likely some beginner mistake as CSS is not my strong suit
This fiddle showcases the issue.
You can wrap stockapps and main divs into a container div
Style this container as below
I used background color for stockapps div to show you its height
.container {
display: flex;
align-items: stretch;
/*Set height as you want, you can use height in px */
height: 100vh;
}
.stockapps {
/* used background-color to show you how much height it takes*/
background-color: #999;
/*You can ignore width if it's not convenient for your desired final output */
width: 50%
}
<div class="container">
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</div>
If I understand you correctly, you need to create a 2-column layout for your menu.
To achieve this layout, I would wrap the <div class="stockapps"> and <div class="main"> into another <div> with class of manu-wrap and add this CSS styles:
.menu-wrap {
display: flex;
justify-content: space-between;
}
I would then remove the float properties and you should have a working 2-column layout.
You can find more about display: flex here.
I'm attempting to create a webcomic style layout in HTML5 and CSS for personal learning. My goal is for the main-container class and all of its contents to fit inside the browser's viewport. The problem I'm encountering is that the image scales up at certain window sizes and the HTML that comes after the image is cut-off.
I've attempted to apply max-height and height values using the "vh" unit of measure in the main-container css. I can't seem to get it to work correctly. I've tried things mentioned on Stackoverflow (This and This), but none seem to produce the desired result. I'm thinking I'm missing something basic about the CSS behavior.
(if it matters, this practice image file is 800x500 in size by default).
Here is the code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
img {
max-width: 100%;
height: auto;
}
.main-container {
display: flex;
flex-direction: column;
}
.comic-container {
display: flex;
flex-direction: column;
margin-left: 5%;
margin-right: 5%;
}
.comic-image {
object-fit: contain;
}
.comic-nav {
display: flex;
}
.f-center {
align-self: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="../css/comic.css" rel="stylesheet" />
</head>
<body>
<div class="main-container">
<h1 class="f-center">Site Title</h1>
<div class="comic-container">
<h4 class="f-center">Comic Title</h4>
<img src="../images/placeholder.png" alt="Comic Image" class="comic-image" />
<p class="f-center">Comic Text and Punchline</p>
<div class="f-center">
First |
Previous |
Next |
Last
</div>
</div>
<h6 class="f-center">Copyright ©XXXX - Person</h6>
</div>
</body>
</html>
Window-size shrunk, all contents fit
Window-maximized, contents cut off
Well, that's how flex boxes work in concordance with max-width/width set to 100%. The image will grow and will take the whole width of the flexed div/container.
display: flex;
flex-direction: column;
margin-left: 5%;
margin-right: 5%;
}
Technically, for your current display, you don't really need this. But if you want to keep it and restrict the image, you can either set a set width (i.e., 60%) for your image or have #media queries do the job of restyling the view accordingly.
I want to place a logo image between two headers and have it resize and move so that it stays relative to the text.
body{
background-color: black;
}
.logotext{
padding: 25px;;
font-family: abnes;
color:white;
}
#h1{
float: left;
}
#h2{
float: right;
}
#logo{
float:inherit;
}
<head>
<link rel="stylesheet" href="main.css">
<body>
<div class=logotext>
<h1 id="h1">Huron</h1>
<h1 id="h2">Interplanetary</h1>
<img id=logo src="https://dummyimage.com/600x600/000/fff">
</div>
</body>
</head>
I want it to look like this: Huron 0 Interplanetary
(where 0 is the logo image).
Simple question, but I'm learning.
I added justify-content: space-between to your .logotext so it stays centered when ever you zoom in or out. make sure to also add display: flex otherwise justify-content won´t work.
.logotext{
padding: 25px;
font-family: abnes;
color:white;
display: flex;
justify-content: space-between;
}
Hope this is what you are looking for. You can look on here for a full explanation on flexbox
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
background-color: red;
display: flex;
padding: 10px;
}
.div2 {
background-color: yellow;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="div1">
<img src="smiley.gif">
<div class="div2">
A<br>Smiley<br>Face
</div>
</div>
</body>
</html>
I use the above code to create an outer div with flex display and in it to be an image and another div with a text right to it. Code works but the image seems to strech... How can I make the image keep its original size? Ty
Your image is stretching because the default value of align-self is stretch. You need to change it to center or something else.
align-self: center
See it the doc