body{
margin-bottom: 10%;
margin-left: 10%;
width:80%;
color: #264653;
position: relative;
}
#photo{
border-radius: 70%;
position: absolute;
left: 25%;
top: 50px;
}
.left1{
margin-top: 10%;
background-color: #264653;
width : 30%;
color: white;
position: relative;
}
.left2{
background-color: #264653;
width : 30%;
padding-bottom: 20%;
padding-top: 25%;
padding-left: 1.5%;
color:white;
font-size: 20px;
text-indent: 12px;
}
#title{
text-align: center;
position: absolute;
left: 31.5%;
top: 0;
font-size: 25px;
border: 1px solid white;
padding : 20px 175px;
background-color: white;
color:#264653;
}
.right{
position: absolute;
left:35%;
top : 30%;
font-size: 20px;
font-weight: bold;
width: 60%;
}
.article{
display: block;
background-color: #264653;
text-transform: lowercase;
font-variant: small-caps;
padding-left: 20px;
font-size: 100%;
margin-right: 20%;
width: 90%;
}
.annee{
display: inline-block;
width: 15%;
font-weight: bold;
}
The entire page when zoomed in way too much, everything is mashing into each other and its just not appearing as the original design including images and text.
So how my webpage could appear with the same original design even with the zooming in?
ps : here I add the code, I don't what's the problem, is it because I used "positio"
Try making the website Responsive
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Responsive Image</h2>
<p>When the CSS width property is set in a percentage value, the image will scale up and down when resizing the browser window. Resize the browser window to see the effect.</p>
<img src="img_girl.jpg" style="width:100%;">
</body>
</html>
you don't posted any code about your design, and your question is very general and it depends on your layout and styles that you use. here I posted a code and have some tips that could help you to solve your problem:
*, *::after, *::before {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 1000px;
background-color: #4b8ff0;
color: white;
margin: 20px auto;
}
.container::after {
content: "";
display: table;
clear: both
}
.leftTag {
float: left;
width: 25%;
height: 360px;
background-color: #7f000a;
}
.rightTag {
float: right;
width: 70%;
height: 360px;
background-color: #123456;
}
#media only screen and (max-width: 854px) {
.container {
width: 750px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>zoom-file</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="leftTag">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor similique vel ex, quis sint at accusamus labore sit.</p>
</div>
<div class="rightTag">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis reiciendis fuga veritatis quaerat praesentium ipsa saepe commodi placeat atque provident vitae illum molestiae, adipisci repudiandae nesciunt ducimus sit ipsam ea quibusdam architecto ut qui beatae! Numquam vel mollitia, expedita iure est. Est voluptatibus, minima obcaecati accusamus, libero aperiam fugiat, repellat a hic deleniti quia maxime.</p>
</div>
</div>
</body>
</html>
here I posted a simple container that have two columns that are besides each other with "float" property. but when you zoom in the page you could inspect that the width of ".container" tag is changed to 750px at some level of zoom. this is because of "#media" rule of css that you can read more about it here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
other links that are usefule are about javascript "resize" method and window width that could help you:
https://www.w3schools.com/jsref/event_onresize.asp
https://www.w3schools.com/jsref/prop_win_innerheight.asp
the last thing that I could add is that it is better to use relative units (like width:45%) to force the tags to have relative size to their parents. in this way you need lower changes on different "window size". because when you zoom in or out actually the browser window width is changed.
HI #issou Ok so to solve your problem you have to change all your unite PX into rem because when you set value with unite PX you fix it to be for example 16px whatever the zoom , but when you set for example
1rem =16px by default so 1rem it will be responsive with the zoom ,
also
you can change:
1rem =16px in the ::root element of your page HTML.
I hope that helpful, if I don't understand your question let me know ("_")
Related
I need help getting the header title (h2,h3,h4) region always appear in the top right corner of their respective div region, no matter what view is being displayed.
Also, the header content keeps overflowing as I shrink the web browser, how can I stop that from running over?
I tried moving the margins and the padding of the header, and the header won't move to the right past 350px.
I tried to adjust the size of the div to allow the header to move top right.
Should I have used the "section element" instead of div?
I haven't tried using absolute or relative positioning.
/********** Base styles **********/
* {
font-family: arial, sans-serif, helvetica;
font-style: normal;
font-size: 16px;
box-sizing: border-box;
margin: 0;
padding: 0;
color: rebeccapurple;
}
h1 {
text-align: center;
font-size: 175%;
margin-bottom: 40px;
color: black;
}
h2,
h3,
h4 {
font-size: 125%;
text-align: center;
font-weight: bold;
border: 1px solid black;
max-width: 30%;
margin-bottom: 5px;
position: relative;
bottom: 11px;
left: 231px;
}
h2 {
background-color: Pink;
color: black;
}
h3 {
background-color: red;
color: white;
}
h4 {
background-color: greenyellow;
color: black;
}
div {
background-color: lightgray;
padding: 10px 0px 10px 10px;
border: 1px solid black;
margin: 0 auto;
margin-bottom: 10px;
max-width: 400px;
position: relative;
}
/*Large devices*/
#media (min-width: 992px) {
.box1 {
float: left;
margin-left: 20px;
margin-right: 60px;
max-width: 30%
}
.box2 {
float: left;
max-width: 30%;
}
.box3 {
float: right;
max-width: 30%;
margin-right: 20px;
}
h2,
h3,
h4 {
position: relative;
left: 70.2%;
}
}
/*Medium devices*/
#media (min-width: 768px) and (max-width:991px) {
.box1 {
float: left;
max-width: 43%;
margin-bottom: 30px;
margin-left: 40px;
margin-right: 0px;
}
.box2 {
float: right;
max-width: 43%;
margin-bottom: 30px;
margin-right: 40px;
}
.box3 {
margin-top: 40px;
clear: both;
max-width: 100%;
margin-left: 40px;
margin-right: 40px;
}
h2,
h3,
h4 {
position: relative;
left: 70.2%;
}
}
}
/*small devices*/
#media (max-width:767px) {
div {
margin-top: 30px;
}
h2,
h3,
h4 {
position: relative;
left: 100%;
}
}
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="utf-8">
<title> Our Menu </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/STYLE.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Our Menu </h1>
<div class="box1">
<h2>Meat</h2>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="box2">
<h3>Pizza</h3>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="box3">
<h4>Salads</h4>
<p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
</body>
</html>
/********** Base styles **********/
* {
font-family: arial, sans-serif, helvetica;
font-style: normal;
font-size: 16px;
box-sizing: border-box;
margin: 0;
padding: 0;
color: rebeccapurple;
}
h1 {
text-align: center;
font-size: 175%;
margin-bottom: 40px;
color: black;
}
h2,
h3,
h4 {
font-size: 125%;
text-align: center;
font-weight: bold;
border: 1px solid black;
max-width: 30%;
margin-left: 310px;
margin-bottom: 5px;
margin-top: 0px;
padding: 0px;
}
h2 {
background-color: Pink;
color: black;
}
h3 {
background-color: red;
color: white;
}
h4 {
background-color: greenyellow;
color: black;
}
div {
background-color: lightgray;
padding: 10px 0px 10px 10px;
border: 1px solid black;
margin: 0 auto;
margin-bottom: 10px;
max-width: 400px;
}
/*Large devices*/
#media (min-width: 992px) {
.box1 {
float: left;
margin-left: 20px;
margin-right: 60px;
max-width: 30%
}
.box2 {
float: left;
max-width: 30%;
}
.box3 {
float: right;
max-width: 30%;
margin-right: 20px;
}
}
/*Medium devices*/
#media (min-width: 768px) and (max-width:991px) {
.box1 {
float: left;
max-width: 43%;
margin-bottom: 30px;
margin-left: 40px;
margin-right: 0px;
}
.box2 {
float: right;
max-width: 43%;
margin-bottom: 30px;
margin-right: 40px;
}
.box3 {
margin-top: 40px;
clear: both;
max-width: 100%;
margin-left: 40px;
margin-right: 40px;
}
}
/*small devices*/
#media (max-width:767px) {
div {
margin-top: 30px;
}
}
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="utf-8">
<title> Our Menu </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/STYLE.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Our Menu </h1>
<div class="box1">
<h2>Meat</h2>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="box2">
<h3>Pizza</h3>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="box3">
<h4>Salads</h4>
<p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
</body>
</html>
So, a few things to go over:
First off, you don't need to use different heading tags for the same hierarchical elements. You already have your first heading as your title, and since you don't have anything that follows you can stick with just <h2> from there.
We can use CSS specificity to target your various headings to change the colors as you prefer. You could also have done this with ids, classes, really there are several ways to approach any layout in CSS; this is just what I chose for simplicity.
floats are very outdated and have been replaced by flex-box techniques which we're going to use to position your headers on your menu items. Could we use position attributes? Sure. But if we're using flex already, we can take advantage of what it's capable of to position elements using a container element to house all of your items and then make the items themselves utilize flex as well.
We can use align-self: flex-end; to position your <h2> tags as needed and then add some margin to give them some breathing room away from the edges of the menuItems.
There's much more that can be done here, but I think this cleans it up quite nicely and you get a much simpler, more easily-responsive layout with less code and less attributes.
Hopefully, that covers everything. Let me know if you have any questions! Thanks for updating your post after my comment. Make sure to keep that in mind moving forward ;)
/********** Base styles **********/
* {
font-family: arial, sans-serif, helvetica;
font-style: normal;
font-size: 16px;
box-sizing: border-box;
margin: 0;
padding: 0;
color: rebeccapurple;
}
.container {
display: flex;
flex-direction: row;
background: transparent;
width: 100vw;
flex-wrap: wrap;
gap: 10px;
padding: 20px;
}
.menuItem {
display: flex;
flex-direction: column;
background-color: lightgray;
padding: 0px 0px 10px 10px;
border: 1px solid black;
margin: 0 auto;
flex: 1 1 32%;
min-width: 400px;
}
h1 {
text-align: center;
font-size: 175%;
margin-bottom: 40px;
color: black;
}
h2 {
font-size: 125%;
text-align: center;
font-weight: bold;
border: 1px solid black;
border-top: 0px;
border-right: 0px;
align-self: flex-end;
padding: 5px 20px;
}
.container .menuItem:nth-child(1) h2 {
background-color: Pink;
color: black;
}
.container .menuItem:nth-child(2) h2 {
background-color: red;
color: white;
}
.container .menuItem:nth-child(3) h2 {
background-color: greenyellow;
color: black;
}
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="utf-8">
<title> Our Menu </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/STYLE.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Our Menu </h1>
<div class="container">
<div class="menuItem">
<h2>Meat</h2>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="menuItem">
<h2>Pizza</h2>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="menuItem">
<h2>Salads</h2>
<p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
</div>
</body>
</html>
Hi I'm new in web dev and i really want to know why in the next code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 1px solid black;
}
html {
font-family: "Rubik", sans-serif;
color: #444;
}
.container {
margin: 0 auto;
width: 1200px;
background-color: #107b72;
}
header {
background-color: rgb(31, 210, 103);
/* height: 100vh; */
}
nav:first-child {
font-size: 20px;
font-weight: 700;
display: flex;
justify-content: space-between;
background-color: green;
}
h1 {
/* value of space scale */
font-size: 52px;
margin-bottom: 32px;
}
p {
font-size: 20px;
line-height: 1.5;
margin-bottom: 48px;
}
.btn:link,
.btn:visited {
font-size: 20px;
font-weight: 600;
background-color: #e67e22;
color: #fff;
text-decoration: none;
display: inline-block;
padding: 16px 32px;
border-radius: 9px;
}
h2 {
font-size: 44px;
margin-bottom: 48px;
}
section {
padding: 96px 0;
background-color: rgb(7, 183, 148);
}
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;600;700&family=Rubik:wght#400;500;700&display=swap" rel="stylesheet" />
<header>
<nav class="container">
<div>LOGO</div>
<div>NAVIGATION</div>
</nav>
<div class="container">
<h1>A healthy meal delivered to your door, every single day</h1>
<p>
The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutricional needs
</p>
Start eating well
</div>
</header>
<section>
<div class="container">
<h2>Some random heading</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quas officia illum laudantium, sit sint, assumenda magnam nisi vitae nihil impedit! Ad molestiae sapiente laboriosam corporis impedit. Velit aliquid natus a amet voluptates unde perferendis,
consequuntur deserunt maiores nihil ipsum.
</p>
</div>
</section>
codepen
https://codepen.io/kimo-007/pen/WNymqgr
my containers (.containers) are taking like only the width of the viewport, as we move to the right side we can see that the child elements (ones that i centered with margin: 0 auto;) are overflowing, this ones have a fixed width in order to center them. But i really don't understand why the containers stays like in that width, the one of the viewport, why not go all the way and occupy the same as the child elements width?, so this ones are block elements and in the dev tools marks also the complete body with this width, so i didn’t provided any fixed one for this element, so the block elements take 100% of the viewport width? so can you clarify me why this behavior, please!!!!
I really want to understand the behavior behind this html and css visualization on the viewport
You need to add another property max-width:100% in .container like below:
.container {
margin: 0 auto;
width: 1200px;
max-width:100%;
background-color: #107b72;
}
See the example below:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 1px solid black;
}
html {
font-family: "Rubik", sans-serif;
color: #444;
}
.container {
margin: 0 auto;
width: 1200px;
max-width:100%;
background-color: #107b72;
}
header {
background-color: rgb(31, 210, 103);
/* height: 100vh; */
}
nav:first-child {
font-size: 20px;
font-weight: 700;
display: flex;
justify-content: space-between;
background-color: green;
}
h1 {
/* value of space scale */
font-size: 52px;
margin-bottom: 32px;
}
p {
font-size: 20px;
line-height: 1.5;
margin-bottom: 48px;
}
.btn:link,
.btn:visited {
font-size: 20px;
font-weight: 600;
background-color: #e67e22;
color: #fff;
text-decoration: none;
display: inline-block;
padding: 16px 32px;
border-radius: 9px;
}
h2 {
font-size: 44px;
margin-bottom: 48px;
}
section {
padding: 96px 0;
background-color: rgb(7, 183, 148);
}
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;600;700&family=Rubik:wght#400;500;700&display=swap" rel="stylesheet" />
<header>
<nav class="container">
<div>LOGO</div>
<div>NAVIGATION</div>
</nav>
<div class="container">
<h1>A healthy meal delivered to your door, every single day</h1>
<p>
The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutricional needs
</p>
Start eating well
</div>
</header>
<section>
<div class="container">
<h2>Some random heading</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel quas officia illum laudantium, sit sint, assumenda magnam nisi vitae nihil impedit! Ad molestiae sapiente laboriosam corporis impedit. Velit aliquid natus a amet voluptates unde perferendis,
consequuntur deserunt maiores nihil ipsum.
</p>
</div>
</section>
i'm not sure to understand your question, but if you want a full width container why you write "width:1200px" to your container" ?
.container {
margin: 0 auto;
width: 1200px;
background-color: #107b72;
}
Remove the fixed width, and your div take all the size who need
You don't need to precise them
.container {
margin: 0 auto;
background-color: #107b72;
}
Hi,
Because you mentioned 1200px as a fixed width for containers;
use this
.container {
margin: 0 auto;
width: 100%;
background-color: #107b72;
}
I want make a tribute page like this:
I'm having trouble adding text with a border next to my image. Im only able to add it below the caption but not next to the image (exactly like the tribute page example). I'd like to do this with only html and css
<!DOCTYPE html>
<html lang="en">
<Style>
body {
background-color: grey;
}
#img-div {
width: 100%;
max-width: 633px;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
border-style: outset;
padding: 2px 500px 2px 2px;
margin-bottom: 2em;
text-align: center;
border-image-width: auto;
}
#main {
border-style: double;
text-align: center;
}
header {
text-align: center;
}
#image {
border: groove;
}
p {
border: black;
}
</Style>
<header>Crikey, mate</header>
<head>
<title id="tittle">Steve Irwin</title>
</head>
<body>
<div id="img-div">
<img id="image" alt="steve Irwin" src="Steve-Irwin.jpg">
<caption id="img-caption">"We dont own planet earth, we belong to it. And we must share it with our wildlife"</caption>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor repellat amet illo hic doloribus dolore eius accusantium quisquam eaque repudiandae adipisci ipsam iure quaerat saepe, assumenda molestias maiores inventore rem?</p>
</div>
<main id="main">
<a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Steve_Irwin">Learn More</a>
</main>
</body>
</html>
Try this. It floats the image to the left and uses clear: both on the following text to ensure it goes below the image.
body {
background-color: grey;
}
#img-div {
width: 100%;
max-width: 633px;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
border-style: outset;
padding: 2px 500px 2px 2px;
margin-bottom: 2em;
text-align: center;
border-image-width: auto;
}
#image {
border: groove;
max-width: 300px;
float: left;
}
#img-caption {
font-size: 300px;
}
.clear {
clear: both;
}
<div id="img-div">
<img id="image" alt="steve Irwin" src="https://www.abc.net.au/cm/rimage/6508936-3x2-large.jpg?v=2">
<caption id="img-caption">"We dont own planet earth, we belong to it. And we must share it with our wildlife"</caption>
<p class="clear">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor repellat amet illo hic doloribus dolore eius accusantium quisquam eaque repudiandae adipisci ipsam iure quaerat saepe, assumenda molestias maiores inventore rem?</p>
</div>
The html element to use here is the figure element - this allows for an image and related content to be shown and then a caption to be presented that is either the first or last child. All elements can be styled.
In your case - you want to have an image and text positioned horizontally and then the caption below it all. So wrap the image and desired text in a div - apply display: flex to that to get it to be aligned horizontally (no need for floats or clearning floats with flexbox);
Then the figcaption sits below and is as wide as the entire figure.
figure {
background-color: grey;
border: solid 1px black
}
#img-div {
display: flex;
padding: 8px
}
#image {
border: groove;
width: 200px;
}
#img-quote {
flex-grow: 1;
padding: 8px
}
figcaption {
background: white;
padding: 8px;
}
<figure>
<div id="img-div">
<img id="image" alt="steve Irwin" src="https://www.abc.net.au/cm/rimage/6508936-3x2-large.jpg?v=2">
<p id="img-quote">"We dont own planet earth, we belong to it. And we must share it with our wildlife"</p>
</div>
<figcaption>Lorem ipsum dolor sit amet consectetur adipisicing elit.</figcaption>
</figure>
This is my first ever webpage:
https://karmah24.github.io/Coursera/mod2_sol/
In each of the sections the titles pizza, burger, beverages should be on the top right of the section. I've assigned each column: relative position, and the headers: absolute position. But this takes them out of normal document flow and when I view the page with different widths, the lorem epsum content moves up for different sizes.
How can I correct this? And why does the content in the paragraph tag move up for all the sizes since the header is taken out of the document flow?
Also how can I center the entire figure(image + caption)?
body {
font-family: Arial, Helvetica, sans-serif;
background-color: azure;
}
* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
.row {
width: 100%;
}
.title1, .title2, .title3 {
padding: 1%;
margin-left: 1%;
margin-bottom: 1%;
border-left: 4px solid black;
border-bottom: 4px solid black;
position: absolute;
top: 0%;
right: 0%;
}
.title1 {
background-color: rgb(223, 209, 25);
}
.title2 {
background-color: rgb(132, 214, 24);
}
.title3 {
background-color: aqua;
}
#media (min-width: 992px) {
.col_lg_4 {
position: relative;
float: left;
width: 31.33%;
padding: 1%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
#media (min-width: 768px) and (max-width: 994px) {
.col_md_6 {
position: relative;
float: left;
width: 48%;
padding: 1%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
.col_md_12 {
position: relative;
float: left;
width: 98%;
padding: 1%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
#media (max-width: 767px) {
.col_sm_12 {
position: relative;
float: left;
width: 98%;
padding: 1%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MENU</title>
<link rel="stylesheet" href="../mod2_sol/css/sytles.css">
</head>
<body>
<h1>Our Menu</h1>
<div class="row">
<section class="col_lg_4 col_md_6 col_sm_12">
<header class="title1">PIZZAS</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="pizza.jpg" alt="pizza" width="50%" height="50%">
<figcaption>Try our latest Supreme Pizza</figcaption>
</figure>
</section>
<section class="col_lg_4 col_md_6 col_sm_12">
<header class="title2">BURGERS</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="burger.jpg" alt="burger" width="50%" height="50%">
<figcaption>Try our latest Supreme Burger</figcaption>
</figure>
</section>
<section class="col_lg_4 col_md_12 col_sm_12">
<header class="title3">BEVERAGES</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="beverages.jpg" alt="beverages" width="50%" height="50%">
<figcaption>Try our Latest Chillers</figcaption>
</figure>
</section>
</div>
</body>
</html>
You can use float: right instead of position: absolute; so the text inside of the paragraph will float around your header.
Setup margin and padding to your paragraph. The browser default is different from browser to browser.
Don't use width="50%" height="50%" in img, they are outdated. Set it in CSS.
Use text-align: center; in section figure to set the content to center.
body {
font-family: Arial, Helvetica, sans-serif;
background-color: azure;
}
* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
.row {
width: 100%;
}
.title1,
.title2,
.title3 {
padding: 1%;
margin-left: 1%;
margin-bottom: 1%;
border-left: 4px solid black;
border-bottom: 4px solid black;
float: right;
}
.title1 {
background-color: rgb(223, 209, 25);
}
.title2 {
background-color: rgb(132, 214, 24);
}
.title3 {
background-color: aqua;
}
section p {
padding: 1%;
margin: 0;
}
section figure {
padding: 1%;
margin: 0;
text-align: center;
}
section img {
width: 50%;
height: auto;
}
#media (min-width: 992px) {
.col_lg_4 {
position: relative;
float: left;
width: 31.33%;
padding: 0%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
#media (min-width: 768px) and (max-width: 994px) {
.col_md_6 {
position: relative;
float: left;
width: 48%;
padding: 0%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
.col_md_12 {
position: relative;
float: left;
width: 98%;
padding: 0%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
#media (max-width: 767px) {
.col_sm_12 {
position: relative;
float: left;
width: 98%;
padding: 0%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MENU</title>
<link rel="stylesheet" href="../mod2_sol/css/sytles.css">
</head>
<body>
<h1>Our Menu</h1>
<div class="row">
<section class="col_lg_4 col_md_6 col_sm_12">
<header class="title1">PIZZAS</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="pizza.jpg" alt="pizza">
<figcaption>Try our latest Supreme Pizza</figcaption>
</figure>
</section>
<section class="col_lg_4 col_md_6 col_sm_12">
<header class="title2">BURGERS</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="burger.jpg" alt="burger">
<figcaption>Try our latest Supreme Burger</figcaption>
</figure>
</section>
<section class="col_lg_4 col_md_12 col_sm_12">
<header class="title3">BEVERAGES</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="beverages.jpg" alt="beverages">
<figcaption>Try our Latest Chillers</figcaption>
</figure>
</section>
</div>
</body>
</html>
So first of all position: absolute removes the element out of the document flow, that means the space that the element take will be removed, so that's why other elements will move a little up.
So a way of setting the titles on the top right side and still take the space.
I will set the following for the parent element (section):
display: flex;
flex-direction: column;
And for the titles remove the position and top / left properties and add the following:
margin-left: auto;
When you set the margin-*direction*: auto it will move the element to the oposite direction.
Css flex module is a great way of creating layouts. Try learn it and it will make thing easier. source
Yes you should use CSS flex module or bootstrap 4, you can achieve this easily.
In the current code you should use px instead of % and column top padding should be similar of button height.
On my page the footer is right under the content, which makes perfect technical sense. However, since the content is short and doesn't fill the whole page, only half of it, this leaves the footer in the middle of the screen. I was wondering how to have the footer at the bottom of the page for whatever screen size it's viewed on. I know this can be done with padding to the body content, or margin on the footer, however I don't know if I could do that to adapt to every screen size. Any help would be appreciated!
CSS
footer {
background-color: #242424;
color: #fff;
margin-top: 50px;
padding-top: 20px;
padding-bottom: 5px;
}
.search_wrapper {
display: inline-flex;
margin-top: 50px;
}
.search_ins {
font-size: 25px;
border: 1px solid #a6a6a6;
border-radius: 25px 0px 0px 25px;
padding: 3.2px 30px;
outline: 0;
width: 600px;
height: 100px;
}
.search_ins:hover .search_ins:focus {
border-color: #a6a6a6;
}
.search_button {
font-size: 30px;
border: 1px solid #a6a6a6;
border-left: 0;
padding: 0 12px;
color: #fff;
outline: 0;
border-radius: 0px 25px 25px 0px;
background-color: #fff;
cursor: pointer;
}
Easiest way to do this is using the vh unit for height of your main content. Assuming a structure similar to the below...
<main>Your content</main>
<footer>Footer</footer>
Set a min-height on your main content that's equal to 100% of you window minus your footer height.
main { min-height: calc(100vh - 60px); }
footer { height: 60px; }
Bam! Footer's always at the bottom, and you don't have to worry about padding, margins, or absolute positioning!
You need to display the parent of the footer as a column flexbox (column is a must because you need the flex items to stack vertically not horizontally); then set the margin-top of the footer to auto.
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
body {
font-family: Arial, sans-serif;
}
.text-center {
text-align: center;
}
.page-wrapper {
min-height: 100%;
display: flex;
flex-direction: column;
}
main {
padding: 0 15px;
}
footer {
background-color: #242424;
color: #fff;
padding: 15px 0;
margin-top: auto;
}
<div class="page-wrapper">
<main id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, dicta. Aut aspernatur ratione, eligendi quis inventore tempore aliquid sequi architecto, natus id deserunt perferendis excepturi sint blanditiis, similique aperiam dicta.</p>
<p>Earum incidunt distinctio repellendus, sequi, voluptate sint aperiam necessitatibus ut, a ipsa officiis ab quasi, odio soluta quos amet praesentium? Nesciunt repudiandae maiores in vel nulla magni aperiam omnis placeat!</p>
</main>
<footer class="text-center">Lorem ipsum dolor</footer>
</div>