How would I make this section mobile responsive? I've designed it in a figma and copy and pasted the CSS that figma produced. Can flexbox alone make the text and image stack ontop of each as the screen size shrinks. Or would I just design the layout for each size screen in figma and then use media queries to call up the right css layout? Or is there any other way that's better to do this?
/* Global Settings */
* {
margin: 0;
padding: 0;
box-sizing: 0;
}
li,
a {
font-size: 0.75rem;
font-family: "Roboto";
font-weight: 700;
color: #303133;
text-decoration: none;
}
h1 {
font-size: 0.75rem;
font-family: "Roboto";
}
button {
width: 176px;
height: 47px;
background: #6442ff;
color: #ffffff;
font-family: "Roboto";
font-size: 12px;
line-height: 18px;
align-items: center;
border: none;
}
.section2-h1 {
position: absolute;
width: 582px;
height: 99px;
left: 160px;
top: 1645px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 50px;
line-height: 59px;
color: #303133;
}
.section2-p {
position: absolute;
width: 537px;
height: 163px;
left: 158px;
top: 1765px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 15px;
line-height: 25px;
/* or 167% */
display: flex;
align-items: center;
color: #777777;
}
.section2-img {
position: absolute;
width: 528px;
height: 402px;
left: 738px;
top: 1626px;
}
.section2-button {
position: absolute;
width: 176px;
height: 47px;
left: 161px;
top: 1962px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Web Design and Web Development">
<meta name="robots" content="index,follow">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<title>Hello</title>
</head>
<body>
<section id="section2">
<header class="section2-head">
<h1 class="section2-h1"> Lorem ipsum dolor sit ame.
</h1>
<p class="section2-p">Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
<img src="img/hello.jpg" alt="" class="section2-img">
<button class="section2-button">READ MORE</button>
</header>
</body>
</html>
A word of advice, I would recommend that you learn how to write your own CSS rather than using the CSS produced by Figma. The CSS code produced by Figma uses absolute positioning to position your HTML elements which would work on one screen size, but the website would not be responsive as it won't work well on any other screen size. To make your website responsive, you should use things like margin and padding to position your code. You can use the Figma code as more of a starting point.
To answer your question, yes flexbox can be used to make the text stack on top of each other. This can be done by changing it from display: flex; to display: block; on smaller screen sizes using a media query. I would advise against using media queries to change the CSS for each screen size using the Figma CSS as you would have to do that for a lot of screen sizes. You should just have that one breakpoint to stack the items at a thin breakpoint.
Below is a code snippet of a suggestion on how to change the Figma CSS code to something more responsive:
/* Global Settings */
* {
margin: 0;
padding: 0;
box-sizing: 0;
}
li,
a {
font-size: 0.75rem;
font-family: "Roboto";
font-weight: 700;
color: #303133;
text-decoration: none;
}
h1 {
font-size: 0.75rem;
font-family: "Roboto";
}
button {
width: 176px;
height: 47px;
background: #6442ff;
color: #ffffff;
font-family: "Roboto";
font-size: 12px;
line-height: 18px;
align-items: center;
border: none;
}
.section2-head {
margin: 160px;
display: flex;
align-items: flex-start;
}
.section2-text {
max-width: 537px;
margin-right: 20px;
}
.section2-h1 {
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 50px;
line-height: 59px;
margin-bottom: 10px;
color: #303133;
}
.section2-p {
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 15px;
line-height: 25px;
display: flex;
align-items: center;
margin-bottom: 40px;
color: #777777;
}
.section2-img {
width: 100%;
max-width: 528px;
}
#media (max-width: 1100px) {
.section2-head {
margin: 80px;
display: block;
}
.section2-text {
margin-bottom: 40px;
margin-right: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Web Design and Web Development">
<meta name="robots" content="index,follow">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<title>Hello</title>
</head>
<body>
<section id="section2">
<header class="section2-head">
<div class="section2-text">
<h1 class="section2-h1"> Lorem ipsum dolor sit ame.
</h1>
<p class="section2-p">Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
<button class="section2-button">READ MORE</button>
</div>
<img src="img/hello.jpg" alt="" class="section2-img">
</header>
</section>
</body>
</html>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I want my layout to look like this:
but it looks like this:
(I'm talking about the text on the right side of the image).
Why does it happen and how can I make it look the same?
This is for a project, and I can't use any reset/normalize file (in case of the browser throwing off the design).
I don't know how to also add the image in the snippet, I would've done that so you get a better representation of my problem.
Thanks.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #457c05;
background-image: url('./img/img03.jpg');
}
.container {
width: 1100px;
margin: 0 auto;
}
.titlu-website {
color: #1A1A1A;
font-size: 64px;
}
.meniu-navigatie {
padding: 0;
list-style-type: none;
background-color: #000;
overflow: hidden;
}
.button-link {
padding: 0 30px;
float: left;
font-family: 'Nova Mono', cursive;
font-size: 20px;
color: #B5B5B5;
text-decoration: none;
}
.button-link:hover {
color: #fff;
}
.active {
padding-left: -10px;
color: #fff;
}
.titlu {
color: #1A1A1A;
}
.continut-langa-imagine {
display: inline-block;
color: #808080;
text-align: justify;
line-height: 180%;
width: 400px;
}
.imagine-centrala {
border: 6px solid #EEE7DF;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="titlu-website">
Black/White
</div>
<ul class="meniu-navigatie">
<li class="buton-wrapper">Home</li>
<li class="buton-wrapper">Blog</li>
<li class="buton-wrapper">Photos</li>
<li class="buton-wrapper">About</li>
<li class="buton-wrapper">Links</li>
<li class="buton-wrapper">Contact</li>
</ul>
</div>
<div class="continut">
<div class="rand">
<h3 class="titlu">Welcome to Black/White</h3>
<img src="./img/img02.jpg" class="imagine-centrala">
<div class="continut-langa-imagine">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.
</div>
</div>
</div>
</div>
</body>
</html>
I have studied your CSS and it's not immediately clear to me why you should need to do this, but you can close the vertical gap above .continut-langa-imagine if you add the style declaration
vertical-align: top;
Working Example:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #457c05;
background-image: url('./img/img03.jpg');
}
.container {
width: 1100px;
margin: 0 auto;
}
.titlu-website {
color: #1A1A1A;
font-size: 64px;
}
.meniu-navigatie {
padding: 0;
list-style-type: none;
background-color: #000;
overflow: hidden;
}
.button-link {
padding: 0 30px;
float: left;
font-family: 'Nova Mono', cursive;
font-size: 20px;
color: #B5B5B5;
text-decoration: none;
}
.button-link:hover {
color: #fff;
}
.active {
padding-left: -10px;
color: #fff;
}
.titlu {
color: #1A1A1A;
}
.continut-langa-imagine {
display: inline-block;
vertical-align: top;
color: #808080;
text-align: justify;
line-height: 180%;
width: 400px;
}
.imagine-centrala {
border: 6px solid #EEE7DF;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="titlu-website">
Black/White
</div>
<ul class="meniu-navigatie">
<li class="buton-wrapper">Home</li>
<li class="buton-wrapper">Blog</li>
<li class="buton-wrapper">Photos</li>
<li class="buton-wrapper">About</li>
<li class="buton-wrapper">Links</li>
<li class="buton-wrapper">Contact</li>
</ul>
</div>
<div class="continut">
<div class="rand">
<h3 class="titlu">Welcome to Black/White</h3>
<img src="https://via.placeholder.com/150" class="imagine-centrala">
<div class="continut-langa-imagine">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.
</div>
</div>
</div>
</div>
</body>
</html>
I changed the block containing the image, text and header to a css-grid:
.rand { display: grid; grid-template-columns: min-content auto; grid-column-gap: 10px; }
This will give the image as much space as needed and the remaining space will be used by the text.
To let the header use the whole width I added:
.titlu { grid-column: span 2; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #457c05;
background-image: url('./img/img03.jpg');
}
.container {
width: 1100px;
margin: 0 auto;
}
.titlu-website {
color: #1A1A1A;
font-size: 64px;
}
.meniu-navigatie {
padding: 0;
list-style-type: none;
background-color: #000;
overflow: hidden;
}
.button-link {
padding: 0 30px;
float: left;
font-family: 'Nova Mono', cursive;
font-size: 20px;
color: #B5B5B5;
text-decoration: none;
}
.button-link:hover {
color: #fff;
}
.active {
padding-left: -10px;
color: #fff;
}
.rand {
display: grid;
grid-template-columns: min-content auto;
grid-column-gap: 10px;
}
.titlu {
color: #1A1A1A;
grid-column: span 2;
}
.continut-langa-imagine {
color: #808080;
text-align: justify;
line-height: 180%;
width: 400px;
}
.imagine-centrala {
border: 6px solid #EEE7DF;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="titlu-website">
Black/White
</div>
<ul class="meniu-navigatie">
<li class="buton-wrapper">Home</li>
<li class="buton-wrapper">Blog</li>
<li class="buton-wrapper">Photos</li>
<li class="buton-wrapper">About</li>
<li class="buton-wrapper">Links</li>
<li class="buton-wrapper">Contact</li>
</ul>
</div>
<div class="continut">
<div class="rand">
<h3 class="titlu">Welcome to Black/White</h3>
<img src="./img/img02.jpg" class="imagine-centrala">
<div class="continut-langa-imagine">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus
egestas at sem.
</div>
</div>
</div>
</div>
</body>
</html>
Using float:
Just add float: left; to the image and preferably a margin right and bottom as in the snippet here:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #457c05;
background-image: url('./img/img03.jpg');
}
.container {
width: 1100px;
margin: 0 auto;
}
.titlu-website {
color: #1A1A1A;
font-size: 64px;
}
.meniu-navigatie {
padding: 0;
list-style-type: none;
background-color: #000;
overflow: hidden;
}
.button-link {
padding: 0 30px;
float: left;
font-family: 'Nova Mono', cursive;
font-size: 20px;
color: #B5B5B5;
text-decoration: none;
}
.button-link:hover {
color: #fff;
}
.active {
padding-left: -10px;
color: #fff;
}
.titlu {
color: #1A1A1A;
}
.continut-langa-imagine {
color: #808080;
text-align: justify;
line-height: 180%;
width: 400px;
}
.imagine-centrala {
border: 6px solid #EEE7DF;
float: left;
margin: 0 10px 10px 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="titlu-website">
Black/White
</div>
<ul class="meniu-navigatie">
<li class="buton-wrapper">Home</li>
<li class="buton-wrapper">Blog</li>
<li class="buton-wrapper">Photos</li>
<li class="buton-wrapper">About</li>
<li class="buton-wrapper">Links</li>
<li class="buton-wrapper">Contact</li>
</ul>
</div>
<div class="continut">
<div class="rand">
<h3 class="titlu">Welcome to Black/White</h3>
<img src="./img/img02.jpg" class="imagine-centrala">
<div class="continut-langa-imagine">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus
egestas at sem.
</div>
</div>
</div>
</div>
</body>
</html>
My two main sections of my website are overlapping and I can't seem to figure out why. I have read a lot about absolute postition etc. Maybe my whole structure is bad? I don't really know. This is my firts ever site i wrote myself. Any help would be welcome! My site can be found on: h16projecten.github.io
body {
margin: 0;
padding: 0;
background: white;
}
.header {
position: relative;
z-index: 100;
margin: 3rem 3rem 3rem 19%;
}
.header img {
height: 65px;
width: auto;
opacity: 1;
}
#wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100vh;
width: 100%;
display: flex;
}
#team {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
}
.layerleft {
position: relative;
width: 48%;
height: 100vh;
background: white;
box-sizing: border-box;
}
.layerright {
width: 52%;
height: 100vh;
box-sizing: border-box;
border-left: 420px solid white;
border-top: 100vh solid transparent;
}
.content {
margin: 40% -5% 2rem 40%;
font-family: Libre Baskerville;
font-size: 20px;
opacity: 0.8;
font-weight: 100;
z-index: 1;
}
.media {
margin: 1rem -3rem 2rem 40%;
font-size: 27px;
cursor: pointer;
opacity: 0.7;
}
.media p ion-icon:hover {
opacity: 1;
color: #1c3c64;
}
#team h2 {
font-family: Libre Baskerville;
margin: 1rem 10rem 2rem 10%;
font-size: 45px;
font-weight: 100;
line-height: 1.8;
}
#team hr {
margin: 1rem 73% 2rem 10%;
color: #1c3c64;
background-color: #1c3c64;
height: 1px;
}
.teamdesc {
margin: 4% 5rem 2rem 12%;
font-family: Libre Baskerville;
font-size: 30px;
opacity: 0.8;
font-weight: 100;
}
footer {
position: relative;
margin: 7rem 2rem 2rem 2rem;
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
}
.footer-desc p {
font-family: Libre Baskerville;
font-size: 18px;
opacity: 0.8;
font-weight: 100;
display: inline-block;
}
.footer-logo {
margin: 0 4% 0 0;
height: 45px;
display: inline-block;
}
.fullscreen-bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -100;
height: 100%;
}
.fullscreen-bg__video {
position: absolute;
right: 0;
top: 0;
width: auto;
height: 100%;
}
#media screen and (max-width: 767px) {
.content {
margin: 110vh -90% 2rem 25%;
}
.media {
margin: 1rem -3rem 2rem 25%;
}
.header {
margin: 10rem 3rem 1rem 9.5%;
}
.layerright {
border-left: 100px solid white;
border-top: 100vh solid transparent;
}
#team h2 {
margin: 85vh 10rem 1rem 12.5%;
}
#team hr {
margin: 1rem 45% 2rem 12.5%;
}
.teamdesc {
margin: 12% 5rem 2rem 14%;
font-size: 25px;
}
.footer-desc p {
font-size: 15px;
}
.footer-logo {
height: 35px;
}
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>H16 Projecten</title>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/ionicons#4.5.5/dist/ionicons.js"></script>
<link rel='stylesheet' id='googleFonts-css'
href='https://fonts.googleapis.com/css?family=Libre+Baskerville%3A400%2C700' type='text/css' media='all'/>
</head>
<body>
<div class="fullscreen-bg">
<video loop muted autoplay playsinline class="fullscreen-bg__video">
<source src="videos/video.mp4" type="video/mp4">
</video>
</div>
<header class="header">
<a class="header-logo"><img src="images/h16logobnw.png" alt="H16"></a>
</header>
<main>
<section id="wrapper">
<div class="layerleft">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit consequat elit non laoreet.
Pellentesque consequat sapien at tellus tempor consequat. Aliquam dictum justo a facilisis tempor.
Duis scelerisque congue aliquam. Sed lacinia, est in sollicitudin egestas, orci diam elementum ex,
ultrices posuere massa urna tincidunt massa. Mauris fermentum luctus lobortis. Morbi tempus neque a
justo mattis, et elementum tellus tincidunt. Vestibulum suscipit nunc at lorem lacinia lobortis.
Suspendisse elementum, neque vel cursus rutrum, odio lacus posuere purus, mattis hendrerit ante orci
porta nisl. Mauris magna tellus, faucibus ut semper.</p>
</div>
<div class="media">
<p>
<ion-icon onclick="location.href='https://www.facebook.com/H16.projecten';"
name="logo-facebook"></ion-icon>
<ion-icon onclick="location.href='https://instagram.com/h16.projecten';"
name="logo-instagram"></ion-icon>
</p>
</div>
</div>
<div class="layerright">
<!-- video -->
</div>
</section>
<section id="team">
<div class="team">
<h2>Team</h2>
<hr>
<div class="teamdesc">
Name's
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi semper rhoncus odio nec luctus.
Vestibulum
aliquet nunc quis mi pharetra porttitor. Sed eros tortor, tincidunt ut ex ac, tincidunt tempus odio.
Mauris
vulputate magna et urna mollis auctor. Nam nulla.
</div>
</div>
</section>
</main>
<footer class="footer">
<img class="footer-logo" src="images/h16logobnw.png" alt="H16"> <span class="footer-desc"><p>© 2020 H16 - All right reserved</p></span>
</footer>
</body>
</html>
Preview: h16projecten.github.io
Kind of like this:
index view
when scrolled down
Thanks!
What design do you want your website to have? It will be helpful if you clarify your question.
I removed the "position: absolute" from the element with the wrapper id, and it did not overlap anymore.
If you want a layout that is easy to organize and doesn't overlap, I suggest checking CSS flex. You can learn more about it in the freeCodeCamp website.
I'm trying to make Iphone 6/7/8 version for my site.
Unfortuantely I do not know how to move my main menu to right corner so it would look like this in web site:
Right now the site looks like this:
Could you tell me how to move this menu?
What is more, I do not know how to move this 6 squares down to the text. I'm trying to usse marigin-bottom etc on SquaresDOWN div or UP but nothing is happening.
I'd really appreciate if you could help me with these two things.
css
*
{
margin: 0;
padding: 0;
}
header
{
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
height: 1080px;
width: auto;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img{
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo
{
margin-top: 10px;
float: left;
}
#sign a
{
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
.left h1{
font-size: 20px;
color:rgb(0, 1, 253);
text-align: justify;
margin-left: 100px;
}
.left {
float: left;
width: 50%;
margin-right: 500px;
}
#ourteam
{
margin-top: 300px;
margin-left: 100px;
font-size: 60px;
font-weight: bold;
color:rgb(24, 188, 253);
}
#squaresUP div {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 30px;
}
#squaresDOWN div {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 30px;
}
#tytul
{
font: Bold 20px/23px Arial;
letter-spacing: 0;
color: #2699FB;
margin-left: 33px;
margin-top: 60px;
}
#tytul1
{
font: Regular 14px/30px Arial;
letter-spacing: 0;
color: #2699FB;
margin-left: 28px;
margin-top: 100px;
}
.square1 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square2 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square3 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square4 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square5 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square6 { background: #7FC4FD 0% 0% no-repeat padding-box;}
#media only screen and (max-device-width: 500px){
body {
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
background-size:100% 3000px;
}
#ourteam
{
margin-top: 300px;
margin-left: 700px;
font-size: 80px;
font-weight: bold;
width: 400px;
color:rgb(24, 188, 253);
}
.left h1{
font-size: 27px;
width: 1500px;
color:rgb(0, 1, 253);
text-align: justify;
margin-left: 100px;
margin-top: 50px;
}
.left {
float: left;
margin-right: 500px;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
width: 1150px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 35px/15px Arial;
padding: 5px;
width: 50px;
}
}
html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>DingDog</title>
<link rel="stylesheet" href="css-images/style-authors.css" >
</head>
<body>
<header>
<div class="row">
<ul id ="logo"> <img src="css-images/dingdog-logo.png"> </ul>
<ul class="main-nav">
<li style="padding-left:10px">NEWS FEED</li>
<li style="padding-left:10px">ABOUT DINGDOG</li>
<li style="padding-left:10px">AUTHORS</li>
<li style="padding-left:10px">CONTACT</li>
<li style="padding-left:10px" id ="sign">SIGN IN</li>
</ul>
</div>
<section>
<article>
<p id="ourteam">Our Team.</p>
<div class="left">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. ILorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. ILorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. I</h1>
</div>
<div class="row2">
<div id="squaresUP">
<div class="square1" style='position:absolute;left:1100px; top:292px;'></div>
<div class="square2"style='position:absolute;left:1350px; top:292px;background: #F1F9FF 0% 0% no-repeat padding-box;'>
<h1 id="tytul" style='position:absolute;left:0px; top:0px;'>Name Surname</h1>
<h1 id="tytul1" style='position:absolute;left:0px; top:0px;'>Co-Founder & CTO</h1>
</div>
<div class="square3"style='position:absolute;left:1600px; top:292px;'></div>
</div>
<div id="squaresDOWN">
<div class="square4"style='position:absolute;left:1100px; top:560px;'></div>
<div class="square5"style='position:absolute;left:1350px; top:560px;'></div>
<div class="square6"style='position:absolute;left:1600px; top:560px;'></div>
</div>
</div>
</article>
</section>
</header>
<footer>
<img src="social/instagram.png" />
<img src="social/twitter-white-logo.png" />
<img src="social/facebook.png" />
</footer>
</body>
</html>
//edit
the squares should be right there. They should be centered under the text.
I have cleaned up your code a little bit and here you can find an example for how to create a header menu inside a css grid looks decent for iphone 7/8 view.
you can change the percentage based on your request to get it a bit bigger if you don't want to create more buttons,
if it doesn't helped you totally at least it could be a reference.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.row{
display: grid;
grid-template-columns: 20% 80%;
}
.main-nav{
float: right;
display: inline-flex;
list-style: none;
font-size: 50%;
}
.main-nav li{
font-size: 50%;
}
</style>
</head>
<body>
<div class="row">
<div id ="logo"><img src="css-images/dingdog-logo.png"></div>
<div>
<ul class="main-nav">
<li style="padding-left:10px">NEWS FEED</li>
<li style="padding-left:10px">ABOUT DINGDOG</li>
<li style="padding-left:10px">AUTHORS</li>
<li style="padding-left:10px">CONTACT</li>
<li style="padding-left:10px" id ="sign">SIGN IN</li>
</ul>
</div>
</div>
<!-- create your html elements and divs below -->
<!-- make sure to arrange them in a decent way to be organzied with y our page -->
<!-- i would suggest you use css grid as i did for the menu and follow almost the same settings
which will make your view look more adjusted and responsive -->
</body>
</html>
I'm trying to place an imagem between two elements, but when it gets to an email client, it doesn't work.
Is it possible to get an absolute positioning of an element or at least simulate it with float or something else? If not, well... back to the basics then (images) I have several references for a workaround, but none of them worked for me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
#news-wrapper {
margin: 0 auto;
width: 100%;
max-width: 600px;
font-family: Arial, Helvetica, sans-serif;
position: relative;
}
#news-head {
height: 117px;
padding: 50.5px;
position: relative;
background-color: #8e8e8e;
}
.heading {
width: 100%;
max-width: 340px;
}
.heading h1 {
color: white;
font-weight: 300;
background-color: #713235;
padding: 9.5px;
font-size: 24px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
font-stretch: condensed;
}
.image-container {
width: 100%;
max-width: 263px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
bottom: 50px !important;
position: relative !important;
left: -3% !important;
right: 0;
float: right;
}
#news-body {
width: 100%;
max-width: 555px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
}
p.default {
color: #4c4c4e;
font-size: 16px;
font-weight: 300;
line-height: 1.81;
}
</style>
</head>
<body>
<div id="news-wrapper">
<div id="news-head">
<div class="heading">
<h1>Lorem ipsum dolor sit amet.</h1>
</div>
</div>
<div class="image-container">
<img src="http://via.placeholder.com/263x115" alt="">
</div>
<div id="news-body">
<div style="margin-top: 120px;margin-bottom: 34px">
<h2 style="color: #713235; font-weight: 300; text-indent: 35px;">VIVAMUS VITAE METUS DOLOR</h2>
<p class="default" style="text-indent: 35px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus lectus vel elit posuere consequat.
Praesent rutrum quam ut mauris pharetra feugiat. Nunc pulvinar malesuada ante, in vestibulum ante interdum
eu. Aliquam malesuada aliquam nulla ut suscipit. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas.</p>
</div>
</div>
</div>
</body>
</html>
You could use this CSS for your image container, basically using a margin-top to move it down to the desired position:
.image-container {
width: 100%;
max-width: 263px;
float: right;
margin-top: 60px;
}
And if that moves your #news-body down too much, you can apply a negative margin-top to it, like in the snippet below.
#news-wrapper {
margin: 0 auto;
width: 100%;
max-width: 600px;
font-family: Arial, Helvetica, sans-serif;
position: relative;
}
#news-head {
height: 117px;
padding: 50.5px;
position: relative;
background-color: #8e8e8e;
}
.heading {
width: 100%;
max-width: 340px;
}
.heading h1 {
color: white;
font-weight: 300;
background-color: #713235;
padding: 9.5px;
font-size: 24px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
font-stretch: condensed;
}
.image-container {
width: 100%;
max-width: 263px;
float: right;
margin-top: 60px;
}
#news-body {
width: 100%;
max-width: 555px;
margin-top: -40px;;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
}
p.default {
color: #4c4c4e;
font-size: 16px;
font-weight: 300;
line-height: 1.81;
}
<div id="news-wrapper">
<div id="news-head">
<div class="heading">
<h1>Lorem ipsum dolor sit amet.</h1>
</div>
<div class="image-container">
<img src="http://via.placeholder.com/263x115" alt="">
</div>
</div>
<div id="news-body">
<div style="margin-top: 120px;margin-bottom: 34px">
<h2 style="color: #713235; font-weight: 300; text-indent: 35px;">VIVAMUS VITAE METUS DOLOR</h2>
<p class="default" style="text-indent: 35px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus lectus vel elit posuere consequat. Praesent rutrum quam ut mauris pharetra feugiat. Nunc pulvinar malesuada ante, in vestibulum ante interdum eu. Aliquam malesuada aliquam nulla
ut suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
</div>
margin may work in this case
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
#news-wrapper {
margin: 0 auto;
width: 100%;
max-width: 600px;
font-family: Arial, Helvetica, sans-serif;
position: relative;
}
#news-head {
height: 117px;
padding: 50.5px;
position: relative;
background-color: #8e8e8e;
}
.heading {
width: 100%;
max-width: 340px;
}
.heading h1 {
color: white;
font-weight: 300;
background-color: #713235;
padding: 9.5px;
font-size: 24px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
font-stretch: condensed;
}
.image-container {
width: 100%;
max-width: 263px;
margin-top: -50px;
margin-right: 3%;
/* maintain position to allow stacking */
position: relative;
right: 0;
float: right;
}
#news-body {
width: 100%;
max-width: 555px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
}
p.default {
color: #4c4c4e;
font-size: 16px;
font-weight: 300;
line-height: 1.81;
}
</style>
</head>
<body>
<div id="news-wrapper">
<div id="news-head">
<div class="heading">
<h1>Lorem ipsum dolor sit amet.</h1>
</div>
</div>
<div class="image-container">
<img src="http://via.placeholder.com/263x115" alt="">
</div>
<div id="news-body">
<div style="margin-top: 120px;margin-bottom: 34px">
<h2 style="color: #713235; font-weight: 300; text-indent: 35px;">VIVAMUS VITAE METUS DOLOR</h2>
<p class="default" style="text-indent: 35px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus lectus vel elit posuere consequat. Praesent rutrum quam ut mauris pharetra feugiat. Nunc pulvinar malesuada ante, in vestibulum ante interdum eu. Aliquam malesuada aliquam nulla
ut suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
</div>
</body>
</html>
The email client should be able to parse the relative and absolute position. It seems like you are trying conflicting positioning by including a float.
In the following example, I set the .image-container container to relative, remove all floats and the max-width, letting it stretch across the screen. Then I set absolute on .image-container img and define top and right positions as necessary. Hope that helps.
#news-wrapper {
margin: 0 auto;
width: 100%;
max-width: 600px;
font-family: Arial, Helvetica, sans-serif;
position: relative;
}
#news-head {
height: 117px;
padding: 50.5px;
position: relative;
background-color: #8e8e8e;
}
.heading {
width: 100%;
max-width: 340px;
}
.heading h1 {
color: white;
font-weight: 300;
background-color: #713235;
padding: 9.5px;
font-size: 24px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
font-stretch: condensed;
}
.image-container {
width: 100%;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
position: relative;
}
.image-container img {
position: absolute;
top: -50px;
right: 40px;
}
#news-body {
width: 100%;
max-width: 555px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
}
p.default {
color: #4c4c4e;
font-size: 16px;
font-weight: 300;
line-height: 1.81;
}
<div id="news-wrapper">
<div id="news-head">
<div class="heading">
<h1>Lorem ipsum dolor sit amet.</h1>
</div>
</div>
<div class="image-container">
<img src="http://via.placeholder.com/263x115" alt="">
</div>
<div id="news-body">
<div style="margin-top: 120px;margin-bottom: 34px">
<h2 style="color: #713235; font-weight: 300; text-indent: 35px;">VIVAMUS VITAE METUS DOLOR</h2>
<p class="default" style="text-indent: 35px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus lectus vel elit posuere consequat. Praesent rutrum quam ut mauris pharetra feugiat. Nunc pulvinar malesuada ante, in vestibulum ante interdum eu. Aliquam malesuada aliquam nulla
ut suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
</div>
Positioning is buggy and doesn't work in every browser. The same with margin.
https://www.campaignmonitor.com/css/positioning-display/position/
You can use some CSS tags used for box model, but it's really hit and miss.
https://www.campaignmonitor.com/css/box-model/
I can't think of an easy way to suggest what will work in this situation. Email is not front-end design. My suggestion is look over this web site before you continue to give you a better idea what will work in email.
https://www.campaignmonitor.com/css
I'm attempting to make a simple HTML/CSS site from scratch for the first time and I'm trying to adjust it for cell phones and tablets.
But the main content is displaying beside the navigation bars when displayed on a phone set to the horizontal position. I don't know how to clear the float in a media query.
Also, when I delete the tablet media query from my CSS... it affects the cell phone media query. Why is that?
body {
background-color: #EBF0DF;
color: #000000;
margin-bottom: 0;
font-family: Verdana, Arial, sans-serif;
}
h1 {
font-family: Papyrus, serif;
font-size: 40px;
background-color: #A8BF78;
color: #000000;
text-align: center;
background-image: url(../site_assets/logo.png);
background-repeat: no-repeat;
background-position: 8%;
background-size: 145px;
margin-left: 110px;
margin-right: 110px;
height: 150px;
line-height: 400%;
margin-bottom: 15px;
border-radius: 30px;
margin-top: 10px;
}
h2 {
font-family: Georgia, serif;
}
header, nav, main, footer {
display: block;
}
nav {
text-align: center;
font-size: 25px;
margin-bottom: 25px;
margin-top: 25px;
}
nav a {
text-decoration: none;
border: 4px outset #CEDAB3;
border-radius: 5px;
color: #84A540;
font-family: Verdana;
padding: 5px;
}
nav a:link {
color: #84A540;
}
nav a:visited {
color: #A8BF78;
}
nav a:hover {
color: #CEDBB3;
}
footer {
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
font-family: Verdana, sans-serif;
font-style: italic;
font-size: 13px;
background-color: #CEDBB3;
}
#portlandimage {
margin-top: 40px;
margin-left: 10px;
}
#wrapper {
width: 90%;
min-width: 1200px;
max-width: 1480px;
margin-right: auto;
margin-left: auto;
}
#media only screen and (max-width: 1024px) {
body {
margin: 0;
padding: 0;
background-image: none;
}
h1 {
margin: 0;
}
nav {
float: none;
width: auto;
padding: 0.5em;
}
nav a {
padding: 1em;
}
main {
padding: 1em;
margin-left: 0;
font-size: 90%;
}
footer {
margin: 0;
}
#wrapper {
width: auto;
min-width: 0;
margin: 0;
box-shadow: none;
}
}
#media only all and (max-width: 768px) {
h1 {
height: 100%;
font-size: 1.5em;
background-image: none;
border-radius: 0;
margin: 0;
text-align: center;
}
nav {
padding: 0;
}
nav a {
float: left;
padding: 0.5em;
width: 75%;
min-width: 6em;
margin-left: 0.8em;
margin-right: 0.5em;
}
main {
padding-top: 0.1em;
padding-right: 0.6em;
padding-bottom: 0.1em;
padding-left: 0.4em;
}
footer {
padding-top: 1em;
padding-bottom: 1em;
font-style: normal;
}
#portlandimage {
display: none;
}
#wrapper {
margin-right: auto;
margin-left: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portland Historical Tours</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="styles/historical_tours_styles.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="wrapper">
<header>
<h1>Portland Historical Tours</h1>
</header>
<nav>
Home
Tours
About Us
Contact
</nav>
<main>
<img alt="Portland, Oregon" height="460" id="portlandimage"
src="site_assets/portland_historical_tours.jpg" style="float: right;" width="620">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit
purus risus, mattis efficitur augue suscipit ut. Etiam lobortis auctor
felis, a dignissim erat iaculis eu. Praesent et elit eu lectus lacinia
posuere id in nisl. Aenean faucibus, massa eget eleifend rutrum, lectus
diam ullamcorper mauris, vitae semper ligula dui et mauris. Nullam
vulputate sem tincidunt elementum molestie. Fusce dignissim tristique
rutrum. Proin gravida mi quam. Nam non eros a mauris aliquam blandit sit
amet sed magna. Fusce auctor leo diam, eu pellentesque orci auctor id.
Mauris tempor nulla ligula, sed rutrum tortor dictum sed. Morbi mollis
cursus ipsum eget mattis.</p>
<h2>Dolor Sit Amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit
purus risus, mattis efficitur augue suscipit ut. Etiam lobortis auctor
felis, a dignissim erat iaculis eu. Praesent et elit eu lectus lacinia
posuere id in nisl. Aenean faucibus, massa eget eleifend rutrum, lectus
diam ullamcorper mauris, vitae semper ligula dui et mauris. Nullam
vulputate sem tincidunt elementum molestie. Fusce dignissim tristique
rutrum. Proin gravida mi quam. Nam non eros a mauris aliquam blandit sit
amet sed magna. Fusce auctor leo diam, eu pellentesque orci auctor id.
Mauris tempor nulla ligula, sed rutrum tortor dictum sed. Morbi mollis
cursus ipsum eget mattis.</p>
</main><br>
<br>
<footer>
Copyright © 2017 Portland Historical Tours<br>
sales#portlandhistoricaltours.com
</footer>
</body>
</html>
The issue is in media query at screen resolution of 1024px, the same way you used media query to hide display for image div in small screen resolution, using same way you can make such many changes in your media query. Use clear:both to align text properly after menu in tag main.
clear - The clear property specifies on which sides of an element
floating elements are not allowed to float.
#media only screen and (max-width: 1024px) {
body {margin: 0; padding: 0; background-image: none;}
h1 {margin: 0;}
nav {float: none; width: auto; padding: 0.5em;}
nav a {padding: 1em;}
main {padding: 1em; margin-left: 0; font-size: 90%; clear:both;}
footer {margin: 0;}
#wrapper {width: auto; min-width: 0; margin: 0; box-shadow: none;}
}
Check this jsFiddle.