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.
Related
I'm having an issue, primarily on mobile devices (in my case, an iOS device) where a div is seemingly preventing scroll-chaining; this is problematic because it's the first place you would touch to scroll (as opposed to a smaller div above it). Similarly for scrolling back up. I couldn't find anything online stating that there was a parameter or property default to mobile webkit that would contain a div. It seems though maybe this is behavior on iOS webkit, as notably, a second swipe on the final image after the "bounce" of the scroll of the div returns to normal positioning in the div allows a scroll (sometimes seemingly inconsistently?)
I've managed to recreate the issue with a test with minimum code repeated from my project (view on mobile! overscroll works fine on desktop)
https://codepen.io/hennigarj/pen/ZEjYrpW
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<style>
#container {
display: block;
width: 100%;
height: 100%;
padding-top: 4vh;
}
.flex-items {
width: 100%;
overflow: auto;
}
.flex-items:nth-child(1) {
display: block;
height: 10vh;
}
.flex-items:nth-child(2) {
display: block;
margin-top: 4vh;
margin-bottom: 4vh;
height: 64vh;
text-align: center;
}
.flex-items img {
max-width: 100%;
}
.flex-items:nth-child(3) {
display: block;
padding-bottom: 6vh;
}
</style>
</head>
<body>
<div id="container">
<div class="flex-items">
Div 1
</div>
<div class="flex-items">
<section id="highlights">
<div class="highlight">
<img src="https://placehold.jp/400x536.png" />
</div>
<div class="highlight">
<img src="https://placehold.jp/400x536.png" />
</div>
<div class="highlight">
<img src="https://placehold.jp/400x536.png" />
</div>
</section>
</div>
<div class="flex-items">
Div 3
</div>
</div>
</body>
</html>
Anyone have any ideas? I've tried all sorts of overflows and overscroll-behaviors on everything but nothing seems to fix this, and there is no value to specifically enable scroll-chaining through overscroll.
This is probably clear as day and I'm completely missing it.
Thank you :)
I've tried various different potential heights, overscroll-behaviors, overflows on divs (to no success). Ideally, hitting the end of the div would continue the scroll-chain past it, just as it does on desktop, but it contains. I've tried -webkit-overflow-scroling: auto as well.
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 8 months ago.
I want my first element to be on the left and my second element to be in the exact center of the screen (while being horizontally aligned). Logo/text left, navigation bar in the middle.
I cant seem to get the following result with the code below:
|red|-------|green|------------|
I want the center of the Green square in the middle of the screen. Which would normally happen if I used text-align: center; on a single element if its not inline-blocked.
HTML:
<body>
<div class="red-color"></div>
<div class="green-color"></div>
</body>
CSS:
.red-color {
background-color: red;
padding: 100px;
display: inline-block;
}
.green-color {
background-color: green;
padding: 100px;
display: inline-block;
}
Would really appreciate any advice, I have been stuck on this for a few days now already. I've tried to wrap them both up in a div and text-align: center; them. but then I cant seem to push the red square back to the left.
And while I can do it by playing with the margins and eyeballing the center, this does not feel like the optimal solution.
<!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>
</head>
<style>
.main{
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
}
.red-color {
background-color: red;
width: 30%;
}
.green-color {
background-color: green;
width: 30%;
}
</style>
<body>
<div class="main">
<div class="red-color">logo/text</div>
<div class="green-color">navbar</div>
</div>
</body>
</html>
u can use flexbox to adjust elements accordingly. I created a main-div then gave height and width and then its has green and red div's , I applied flex property to main and gave width to each div so , by adjusting the width u can change the position of logo or navbar.
<!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">`enter code here`
<title>Document</title>
</head>
<style>
.main{
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
}
.red-color {
background-color: red;
width: 30%;
margin-right: 5%;
}
.green-color {
background-color: green;
width: 30%;
margin-left: 10%;
}
</style>
<body>
<div class="main">
<div class="red-color">logo/text</div>
<div class="green-color">navbar</div>
</div>
</body>
</html>
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;
}
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.
this is my index.html
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
font-family: Kufam;
}
header{
display: flexbox;
flex-direction: column;
width: 90%;
margin: auto;
}
img{
height: 50px;
width: 50px;
}
.logo-container{
background: #ffaaba;
}
nav{
background-color: aquamarine;;
}
.cart{
background-color: slateblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://fonts.google.com/specimen/Kufam">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo-container">
<img src="./images/Bookstore.jpg" alt="logo">
<h4 class="logo">Three Dot's</h4>
<nav>
<ul class="nav-links">
<li>Specs</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</nav>
<div class="cart">
<img src="./images/Not_Alone.jpg" alt="Not_Alone">
</div>
</div>
</header>
</body>
</html>
Now, I want them to go side by side . How?
I'm just a beginner so I can't understand much.
It would be good to get the solution with some explanation
thank you.
I was working on VS Code and using Chrome and Microsoft Edge to run the code
The issue is that the display: flex property ONLY applies to the DIRECT children of the flex container In this case you need to apply display flex- not to the header (which has only one child - but to the container that houses all the otgher parts - and then also to the ul as well to get the li's to be flexed.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
font-family: Kufam;
}
header{
width: 90%;
margin: auto;
}
img{
height: 50px;
width: 50px;
}
.logo-container{
background: #ffaaba;
display: flex;
}
nav{
flex-grow: 1;
background-color: aquamarine;;
}
.cart{
background-color: slateblue;
}
.nav-links {
display: flex;
justify-content: space-around;
list-style: none
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://fonts.google.com/specimen/Kufam">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo-container">
<img src="./images/Bookstore.jpg" alt="logo">
<h4 class="logo">Three Dot's</h4>
<nav>
<ul class="nav-links">
<li>Specs</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</nav>
<div class="cart">
<img src="./images/Not_Alone.jpg" alt="Not_Alone">
</div>
</div>
</header>
</body>
</html>
There are multiple issues with your code.
First: there is no display: flexbox -> should be display: flex
Also, you should use flex-direction: row to make it work.
But it still not enough because it has to be done on the parent element so you should add those to .logo-container instead of header.
EDIT:
The best way to understand flexbox is definitely https://flexboxfroggy.com/ -> you will get it in no time :-)
add this css
.nav-links{
display:flex;
flex-direction:row;
}
You might need to add margin yourself
I have tried explaining the areas which you could improve to obtain the desired layout. Highlighting some key pointers for better understanding the CSS flexbox behavior:
CSS flexbox behaves as the parent-child relation between items to be kept in flex, when parent element/tag is assigned display: flexit executes the flex behavior on it's direct children and not on the children of children, for that you will need to give display:flex to the child container.
The syntax for executing CSS flexbox on an element is display:flex only, other values shall not work and in some areas throw a syntax error.
The flex-direction concept works like when you need a side-by-side layout horizontally, the value that works is row and when you need a down-by-down layout vertically the value that works is column. Hope this throws a light on the concept of CSS Flexbox!
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
font-family: Kufam;
}
header{
/* display: flexbox */ /* syntactical error here display: flex; is the syntax */;
display: flex;
/* flex-direction: column */ /* in order to get a side-by-side layout value for flex-direction is row and if you want to set layout one below the other then it is column */;
flex-direction: row;
/* you could or could not give justify-content attribute as needed */
justify-content: space-between;
width: 90%;
margin: auto;
}
img{
height: 50px;
width: 50px;
}
.logo-container{
background: #ffaaba;
}
nav{
background-color: aquamarine;;
}
.cart{
background-color: slateblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://fonts.google.com/specimen/Kufam">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<!--<div class="logo-container"> -->
<!-- flexbox works nicely when given to parent and the parent contains direct children element in it's scope which needs to be flexified, introducing any other child container inside the parent to which flex is gievn will excute flex behaviour on it only and not on the sub children -->
<div class="logo-container">
<img src="./images/Bookstore.jpg" alt="logo">
<h4 class="logo">Three Dot's</h4>
</div>
<nav>
<ul class="nav-links">
<li>Specs</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</nav>
<div class="cart">
<img src="./images/Not_Alone.jpg" alt="Not_Alone">
</div>
<!--</div> -->
</header>
</body>
</html>
I am terribly sorry guys . It was actually my mistake . The div element which is starting right after the header should have closed after the h4 but I accidently used it to cover the entire header due to which the problem occured .Once again I apologize for wasting your precious time. I AM REALLY SORRY.