on my website, I want to have 6 'image boxes' (3 in one 'row' and 3 in below 'row'). When I change the size of my screen/tab then these 6 image boxes should be always seen completely. They should always fit into the screen size. My code works somehow but not on the bottom. Only one part of the cards in the second row can be seen after decreasing screen size after a certain amount.
Also, I want my content to take 100% of the screen without a scroll bar popping up.
The web content is divided into 2 parts: The top layout and the imagebox.
this is basically my css-file:
* {
font: 18px Verdana;
font-size: 22px;
}
html{
height: 100%;
}
body {
font: 18px Verdana;
height: 100%;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 30px;
margin-top: 30px;
overflow: hidden;
}
#topLayout {
height: 190px;
margin-bottom: 10px;
}
#imagebox {
height: 80%;
margin-bottom: 0px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.box{
cursor: pointer;
flex: 0 1 32.5%;
margin-top: 1.2%;
}
and this is my html code:
<body>
<div id="topLayout">
<div id="block1">
.....
</div>
<div id="block2">
....
</div>
</div>
// the images are appended to the imagebox tag in the .js file via a
function
<div id="imagebox"></div>
</div>
Thank you very much in advance.
Maybe it helps you. Try this
#imagebox {
position: absolute;
width: 100%;
top: 230px;
bottom: 0;
left: 30px;
right: 30px;
}
Here is a example
Related
Edit: here is a CodePen with CSS / HTML
I spend the weekend creating a CSS card for a website, only to realize that it's not responsive, at all. I'm not very well versed in CSS or responsive design, so I am hoping someone with more experience can help me out. So far, I've tried playing around with the #media tag, but I have not had any success. This is the relevant CSS:
#import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
box-sizing: border-box;
}
body {
background: #ffffff;
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.courses-container {
}
.course {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
display: flex;
max-width: 100%;
margin: 20px;
overflow: hidden;
width: 1300px;
}
.course h6 {
opacity: 0.6;
margin: 0;
letter-spacing: 1px;
text-transform: uppercase;
}
.course h2 {
letter-spacing: 1px;
margin: 10px 0;
}
.course-preview {
background-color: #2a265f;
color: #fff;
padding: 30px;
max-width: 250px;
}
.course-preview a {
color: #fff;
display: inline-block;
font-size: 12px;
opacity: 0.6;
margin-top: 30px;
text-decoration: none;
}
.course-info {
padding: 30px;
position: relative;
width: 100%;
}
.right-container {
padding: 30px;
background-color: #fff;
width: 30%;
line-height: 200%;
}
.progress-container {
position: absolute;
top: 30px;
right: 30px;
text-align: right;
width: 150px;
}
.progress {
background-color: #ddd;
border-radius: 3px;
height: 5px;
width: 100%;
}
.progress::after {
border-radius: 3px;
background-color: #2a265f;
content: '';
position: absolute;
top: 0;
left: 0;
height: 5px;
width: 10%;
}
.progress-text {
font-size: 10px;
opacity: 0.6;
letter-spacing: 1px;
}
This is a simple suggestion, using CSS Grid. It's a two column card (as yours): the left column width-fixed (300px), the right column width-fluid. I've applied a little gap between them just to make my example clearer.
.card {
max-width: 1000px;
display: grid;
grid-template: "left right" / 300px 1fr;
background-color: #fed330;
border-radius: 10px;
height: 300px;
}
.card>* {
padding: 20px;
}
.left {
grid-area: left;
}
.right {
grid-area: right;
}
#media screen and (max-width: 700px) {
.card {
grid-template: "left" "right" / 100%;
}
}
<div class="card">
<div class="left">
Lorem ipsum....
</div>
<div class="right">
Lorem ipsum...
</div>
</div>
It could be a useful starting point.
#gaston
A good way to test and learn about CSS is to use the browser's "Inspect" feature, with which you can test the css behavior in real time.
Activating, Deactivating features, changing values, and adding new ones.
You see the result in real time.
Then just adjust your code according to your tests.
Just right-click on the area you want to inspect. and then Inspect.
You will see an area with HTML and another with CSS.
Click on the areas in HTML and see the corresponding css.
***** Then just test to find the desired result.
That's how I found the solution in your code:
In the ".course" class of your css you added the "width" property twice.
"max-width: 100%;"
"width: 1000px;"
However, the last property entered has priority over the previous ones.
"width: 1000px;" is defining that your card will ALWAYS have 1000px.
SOLUTION:
Just remove: "max-width: 100%;"
And Modify "width: 1000px;" for "max-width: 1000px;"
So your card will have a maximum of 1000px, the minimum will be defined according to the width of the window
It will look like this:
.course {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 10px 10px rgba (0, 0, 0, 0.2);
display: flex;
margin: 20px;
overflow: hidden;
max-width: 1000px;
}
The #media function will set the css when the screen is adjusted to a minimum or maximum width chosen by you.
What is defined within #media will have priority over other css. but only when the window meets the width you set.
You can use this to change the shape of your card completely to very small screens, placing the purple part on top of the card for example.
If you've solved your problem, mark the right answer to help others.
Good luck.
So, I want this picture in the middle of the screen. slightly above the middle of the page. it works for other screen sizes but for this size 1024px it only stays at the top of the screen unless I use bottom: (some px height); but all of my other pages don't need it. I was wondering if anyone knew a way to move this to the middle of the screen but slightly higher than the exact middle of the screen without for example bottom: 140px. if not that fine also can someone show me how to optimize this I know my code is sloppy and can use some work and can be better equipped to handle different sizes of pages. 1024 or 2000px for example. Thank you
#media only screen and (max-device-width: 1024px){
#logo {
position: relative;
bottom: 700px;
}
#logo img{
position: relative;
width: 9%;
height: auto;
bottom: -20px;
}
#header_size{
width: 70%;
height: auto;
margin-left: auto;
margin-right: auto;
}
#border{
border-radius: 30px;
border: 10px;
border-color: black;
border-style: double;
width: 100%;
height: 100%;
}
.right_and_margin {
margin:0 auto;
width: 40%;
height: 20%;
}
.forum_styling{
height: 55px;
width: 600px;
font-size: 25pt;
}
p {
font-size: 22pt;
font-weight: bold;
color: white;
margin-top: 5%;
}
}
<div class="right_and_margin">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Foster_Reservoir_%28Linn_County%2C_Oregon_scenic_images%29_%28linnDA0050a%29.jpg/250px-Foster_Reservoir_%28Linn_County%2C_Oregon_scenic_images%29_%28linnDA0050a%29.jpg
" alt="Image" id="border">
<p>Thank you for the help</p>
</div>
if i correctly understand you here is a solution. In flexbox we trust :)
html,
body {
height: 100%;
margin: 0;
}
.right_and_margin {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<div class="right_and_margin">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Foster_Reservoir_%28Linn_County%2C_Oregon_scenic_images%29_%28linnDA0050a%29.jpg/250px-Foster_Reservoir_%28Linn_County%2C_Oregon_scenic_images%29_%28linnDA0050a%29.jpg" alt="Image" id="border">
<p>Thank you for the help</p>
</div>
Have a look at flexbox for horizontal and vertical alignment. Should be simple to add the following properties to the right element for your needs:
display: flex;
justify-content: center;
align-content: center;
Ressource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
My code is here: https://jsfiddle.net/yaphurt0/8/
I tried to get rid of the rest of the webpage to show just the necessary section, but it ended up not displaying correctly, and I couldn't figure out why for the life of me.
Regardless, I've trimmed away what I could and marked in comments in the css file the relevant code.
My problem is that I am trying to display 3 boxes at the bottom of the page next to each other. As the window shrinks I use a media query to increase the width of the boxes so there are 2 per line, and then 1 if the the window shrinks further. Of course this means the boxes take up more room vertically, meaning they spill out as the parent div doesn't scale with it.
I have tried overflow: auto; to #me, however this just added a scrollbar to the content, when instead I want the #me to scale accordingly to contain its children. This is a pretty big problem which is stumping me, as you can see from the main text ("Hi I'm Danny..."), that also suffers from the same issues if the webpage is made very wide and shallow.
As much as I'm looking for a solution, I'm really hoping for an explanation so I can understand why the webpage is behaving as it is/what makes the parent scale, so in the future I don't just copy and paste and hope.
#me {
width: 100%;
height: 45%;
background-color: white;
}
#me .container {
width: 60%;
height: 100%;
margin: 0 auto;
}
#me .container .introduction {
height: 30%;
margin-bottom: 5%;
}
#me .container .introduction .title,
.subInfo {
width: 80%;
color: #262626;
text-align: center;
margin: 0 auto;
border-bottom: 2px solid orange;
}
#me .container .introduction .title {
font-family: 'Unica One', cursive;
text-transform: uppercase;
font-size: 4vw;
}
#me .container .introduction .subInfo {
text-align: center;
font-family: 'Unica One', cursive;
text-transform: uppercase;
font-size: 2vw;
}
#me .container .infoBody {
width: 100%;
height: 50%;
min-height: 75px;
margin: 0 auto;
}
#me .container .infoBody .columnInfo {
float: left;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 31.5%;
margin: 2px;
background-color: orange;
border: 2px solid #e8eaed;
border-radius: 5px;
}
#media only screen and (min-width: 500px) and (max-width: 1000px) {
.minimalHeading {
font-size: 5.5vw;
}
#me .container .infoBody .columnInfo {
width: 48.5%;
margin: 0 auto;
}
.minimalHeading .contactMe a {
font-size: 4vw;
}
}
#media only screen and (max-width: 500px) {
.minimalHeading {
font-size: 7.5vw;
}
#me .container .infoBody .columnInfo {
width: 90%;
margin: 0 auto;
}
.minimalHeading .contactMe a {
font-size: 5vw;
}
}
<div id="me">
<div class="container">
<div class="introduction">
<p class="title">My Skillset</p>
<p class="subInfo">The standard Web-development stuff</p>
</div>
<div class="infoBody">
<div class="columnInfo">Hi</div>
<div class="columnInfo">There</div>
<div class="columnInfo">You!</div>
</div>
</div>
</div>
The problem is in float:left property of the .columnInfo element and the height: 45% of #me element. If you remove those, you will see that #me will contain all three .columnInfo elements, but they will be stacked on top of each other. You can use display:flex on the .infobody to make them wrap next to each other. You will have to give your .columninfo elements an absolute height though.
You can use flex, like mentioned. Or simply add a clear to infoBody, like so:
// html
<div class="infoBody clear">
//css
.clear::after {
content: '';
display: table;
clear: both;
}
The problem is your .columnInfo. Elements with the float property are no longer part of the normal flow of the page, so the containing div doesn't know how high they are. The clear solves this problem by adding a hidden pseudo element below those columns and forcing the containing div down.
I'm having trouble trying to get a desired page layout to work by using HTML5/CSS3 only (without needing JavaScript).
The basic concepts are...
A page with a header and body (static).
The body has several "sections" which each have a header and body (static).
The sections flow from left-to-right (you scroll the page body horizontally to see the sections if they overflow).
The sections have a fluid height and width (height adjusts to the size of the page body, width adjusts based on the contents or a min of 300px).
The fields within the section body flow from top-to-bottom. When there is overflow, the fields overflowing should move to a new column and the section body should expand dynamically. The should not be broken apart if they overflow to a new column (the label and input should be moved together).
NOTE: I'm testing in IE11 currently but ultimately the solution should be functional in the latest Chrome/FF/IE/Safari versions.
I can't seem to get the section body to expand when the fields overflow into new columns while still retaining the column behavior.
HTML:
<div class="container">
<div class="header">Header</div>
<div class="body">
<div class="section">
<div class="sectionheader">Section 1</div>
<div class="sectionbody">
<div class="field">
<label>Field 1</label>
<input type="text" />
</div>
<!-- NOTE: repeat field element to create 5 or more fields... -->
</div>
</div>
<!-- NOTE: repeat section element to create more sections... -->
</div>
</div>
CSS:
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
html, body, .container {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background-color: gray;
overflow: hidden;
}
.header {
height: 150px;
background-color: red;
}
.body {
position: absolute;
top: 150px;
bottom: 0;
left: 0;
right: 0;
white-space: nowrap;
vertical-align: top;
padding: 40px;
overflow-x: auto;
overflow-y: hidden;
}
.section {
min-height: 200px;
height: 100%;
border: 2px solid red;
margin-right: 40px;
display: inline-block;
min-width: 300px;
position: relative;
vertical-align: top;
}
.sectionheader {
height: 40px;
color: white;
font-size: 20pt;
padding-left: 5px;
}
.sectionbody {
white-space: normal;
border: 2px solid blue;
padding-top: 10px;
color: white;
height: calc(100% - 40px);
column-count: auto;
-webkit-column-count: auto;
column-width: 320px;
-webkit-column-width: 320px;
column-fill: auto;
-webkit-column-fill: auto;
}
.field {
margin: 0 10px 10px 10px;
width: 300px;
display: inline-block;
}
.field label {
font-size: 12px;
line-height: 20px;
display: block;
}
.field input {
width: 100%;
font-size: 16px;
line-height: 20px;
height: 40px;
padding-left: 5px;
}
Here is the fiddle: http://jsfiddle.net/t7kQ4/7/
(drag the handle to adjust the height of the result pane to trigger the field overflow)
Does this help: http://jsfiddle.net/t7kQ4/10/
You need to remove the calc you are performing and allow it to be auto.
section {
height:auto;
}
.sectionbody {
height:auto;
}
Below is a simple html web page that is responsive except for one div (goplay) that over lays other parts of the page when screen size is reduced, instead of dropping below the image.
Styling Sheet external
#wrapperlp {
width: 100%;
margin: auto;
}
#media screen and (max-width: 800px) {
#wrapperlp {
width: 90%;
min-width: 100px;
}
}
#headerlp {
font-size: 30px;
color: white;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
#para {
font-size: 20px;
color: white;
text-align: center;
}
#game_img {
height: 250px;
width: auto;
margin-bottom: -30px;
position: relative;
display: inline-block;
float: left;
margin-top:-30px;
padding-top: 5px;
max-width: 100%;
}
#goplay {
position: relative;
display: inline-block;
float: right;
margin-top:-250px;
margin-left:80px
}
#spacer {
height: 40px;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 900px;
padding-top:20px;
}
Html which is set to call the above css
<div id="wrapperlp">
<div style="background-image: url(https://.jpg); height: 430px; width: 1000px; margin-left: auto; margin-right: auto; max-width: 100%;">
<div id="headerlp">Some Text</div>
<div id="para">More Text</div>
<div id="game_img"><a href="//www.youtube.com/" target="_blank"><br />
<img src="https://.png" height="auto"/></a></div>
</div>
</div>
<div id="goplay">----form----/div>
<div id="spacer">
<div style="position: relative; float: left">Text</div>
</div>
margin-top and left should in %. thats y its overlay becoz of px
First off, it looks like you're missing a couple of divs.
The goplay div doesn't have a closing tag, (well it's got one but not that works)
Also your bottom spacer looks like it's missing a closing tag as well. Not sure if it's supposed to wrap anything or what.
Perhaps you had some copy/paste errors?
Normally if you set a negative margin it will overwrite other divs. You should, for the most part, not have to use negative margins.