Just wondering if anyone can help me to get 1st half and 2nd half on this codepen to display on the same line? I have tried display:inline; however this did not fix the issue.
http://codepen.io/EuanR/pen/BNEBvE
HTML:
<HTML>
<HEAD>
<title>Homepage</title>
</HEAD>
<HEADER>
<H1 id="landingpagelg">Header</H1>
<H2 id="landingpagesm">Sub Header</H2>
</HEADER>
<BODY>
<div class="footerwrapper">
<div class="BFS">
<P>1st half</P>
</div>
<div class="BLFS">
<P>2nd half</P>
</div>
</div>
</script>
</html>
CSS:
a {
text-decoration: none;
}
body {
background-color: #161616;
}
header {
height: 100%;
background-image: url(http://i.imgur.com/11nVLmd.jpg);
background-size: cover;
background-position: center;
margin-bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: center
}
#landingpagelg {
font-family: Caviar Dreams;
font-size: 42px;
color: #FFF;
letter-spacing: 1px
}
#landingpagesm {
font-family: Caviar Dreams;
font-size: 21px;
color: #FFF
}
#CMSub {
min-width: 75px;
}
a {
color: #000;
}
a.hover {
color: 0000EE;
}
::selection {
background: #FFB870;
/*#CCCCCC*/
}
::-moz-selection {
background: #FFB870;
}
img::selection {
background: transparent
}
img::-moz-selection {
background: transparent
}
input {
width: 150px;
border: 1px solid;
border-radius: 6px;
height: 25px;
padding: 4px;
}
textarea {
border: 1px solid;
max-width: 500px;
max-height: 250px;
border-radius: 5px;
width: 250px;
height: 125px;
}
#github {
padding-right: 5px;
}
.footerwrapper {
width: 100%;
}
.BFS {
height: 150px;
width: 50%;
background-color: #161616;
}
.BLFS {
height: 150px;
width: 50%;
background-color: #99CCFF;
}
.footerwrapper {
width: 100%;
display:flex;
}
Display Flex solves the issue
.footerwrapper {
width: 100%;
border: 1px solid black;
overflow: hidden;
}
.BFS {
height: 150px;
background-color: #161616;
width: 50%;
float:left; /* add this */
}
.BLFS {
height: 150px;
width: 50%;
background-color: #99CCFF;
float:left; /* add this */
}
Hope this helps
If you don't want to edit your CSS, then simply add the following lines
.footerwrapper {
font-size: 0; /*Removes white space in inline-block elements*/
}
.BFS {
box-sizing: border-box;
display: inline-block;
}
.BLFS {
box-sizing: border-box;
display: inline-block;
}
Make sure you set the font-size in every element that is a child of .footerwrapper
Use
.BFS {float:left;}
.BLFS {float:right;}
Alternatively put the BLFS element first in your HTML and float it to the right. Then the .BFS{float:left;} is unnecessary since it will fill on the left anyway.
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 9 months ago.
I currently have two divs in each other and I want to center the parent div on the page so that no matter if I zoom in/out the parent div will always be in the center of the page.
.marioHeader {
background-image: url("resources/marioBackground.jpg");
background-size: 1800px;
background-position: bottom;
display: flex;
justify-content: center;
align-items: center;
background-repeat: repeat-x;
background-color: #2596be;
margin-top: 50px;
text-align: center;
flex-direction: column;
border-style: solid;
border-width: 10px;
margin-bottom: 350px;
max-width: 1800px;
margin-left: auto;
margin-right: auto;
}
.headermario {
background-image: url("resources/banner.png");
background-size: 600px;
background-repeat: no-repeat;
background-position: bottom;
background-color: red;
height: 200px;
width: 90%;
margin-bottom: 100px;
border-style: solid;
border-width: 10px;
}
.topnav {
overflow: hidden;
display: flex;
justify-content: center;
margin-top: 230px;
}
<div class="marioHeader"><h1 class="title">Super Mario</h1><div class="headermario"><div class="topnav">AboutHistory</div></div></div>
<div class="marioHeader">
<h1 class="title">Super Mario</h1>
<div class="headermario">
<div class="topnav">
About
History
</div>
</div>
</div>
It looks like this now:
But I want it to look like this:
Added everything to a single html file. Commented some of the existing css which defined margin for the container. And added
width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center;
to make it center. The basic idea is to containe the the div and move the div to the center of the container.
Happy hacking. Cheers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Super Mario</title>
<style type="text/css">
#charset "utf-8";
/* CSS Document */
.nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.nav a {
padding: 8px 8px 30px 65px;
text-decoration: none;
font-size: 35px;
color: #818181;
display: block;
transition: 0.3s;
font-weight: 500;
}
.nav a:hover {
color: #f1f1f1;
}
.nav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.menu {
font-size: 1.8vw;
position: absolute;
font-weight: bolder;
}
#main {
transition: margin-left .5s;
/* padding: 10px; */
}
#media screen and (max-height: 450px) {
.nav {
padding-top: 15px;
}
.nav a {
font-size: 18px;
}
}
.headerText {
text-align: center;
}
.marioHeader {
background-image: url("resources/marioBackground.jpg");
background-size: 1800px;
/* height: 450px; */
background-position: bottom;
display: flex;
justify-content: center;
align-items: center;
background-repeat: repeat-x;
background-color: #2596be;
margin-top: 50px;
text-align: center;
flex-direction: column;
border-style: solid;
border-width: 10px;
/* margin-bottom: 350px; */
max-width: 1800px;
/* margin-left: auto;
margin-right: auto; */
}
.title {
font-size: 50px;
font-weight: bolder;
}
.headermario {
background-image: url("resources/banner.png");
background-size: 600px;
background-repeat: no-repeat;
background-position: bottom;
background-color: red;
height: 200px;
min-width: 70%;
margin-bottom: 100px;
border-style: solid;
border-width: 10px;
}
.topnav {
overflow: hidden;
display: flex;
justify-content: center;
margin-top: 230px;
}
.topnav a {
float: left;
color: red;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 23px;
border-left: 1px solid;
border-right: 1px solid;
text-shadow: #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.menu {
cursor: pointer;
}
.aboutp {
width: 1000px;
text-align: center;
display: block;
margin: auto;
}
.mario {
display: block;
margin-left: auto;
margin-right: auto;
width: 200px;
}
.topContent {
background-color: red;
height: 100px;
width: 70%;
margin: auto;
justify-content: center;
align-items: center;
display: flex;
max-width: 700px;
}
.mainContent {
height: 100%;
width: 100%;
margin: 0 auto 50px;
justify-content: center;
align-items: center;
display: flex;
flex-wrap: wrap;
max-width: 768px;
}
.left {
width: 15%;
}
.right {
width: 15%;
}
.center {
width: 70%;
background-color: antiquewhite;
min-height: 50%;
}
.bottom {
background-color: red;
width: 100%;
height: 100px;
max-width: 1800px;
margin: auto;
}
body {
background-color: saddlebrown;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.mariogif {
float: right;
width: 200px;
margin: auto 20px auto 10px;
}
</style>
<script type="text/javascript">
function openNav() {
document.getElementById("nav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("nav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
</script>
</head>
<body>
<div id="nav" class="nav">
×
Home
About
History
</div>
<span class="menu" onclick="openNav()">☰ Menu</span>
<div id="main" style="width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center;">
<div class="marioHeader" style="width: 70%">
<h1 class="title">Super Mario</h1>
<div class="headermario">
<div class="topnav">
About
History
</div>
</div>
</div>
</div>
</body>
</html>
Remove margins on .marioHeader then nest the code in a .container. with a min-height: 100vh;. Then you can set display: flex; on this new parent container with align-items: center; and justify-content: center; to get it centered.
.marioHeader {
background-image: url("resources/marioBackground.jpg");
background-size: 1800px;
background-position: bottom;
display: flex;
justify-content: center;
align-items: center;
background-repeat: repeat-x;
background-color: #2596be;
width: 100%;
text-align: center;
flex-direction: column;
border-style: solid;
border-width: 10px;
max-width: 1800px;
}
.headermario {
background-image: url("resources/banner.png");
background-size: 600px;
background-repeat: no-repeat;
background-position: bottom;
background-color: red;
height: 200px;
width: 90%;
margin-bottom: 100px;
border-style: solid;
border-width: 10px;
}
.topnav {
overflow: hidden;
display: flex;
justify-content: center;
}
.container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="marioHeader">
<h1 class="title">Super Mario</h1>
<div class="headermario">
<div class="topnav">
About
History
</div>
</div>
</div>
</div>
/* GLOBAL STYLES */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1{
Font-Family: 'Ovo', Serif;
font-size: 90px;
}
h2,h3,h4,h5,h6,p{
Font-Family: 'Quattrocento Sans', Sans-Serif;
}
:root{
--bg1: #E8E0D2;
--bg2: #9B9FAE;
--green: #5F6D45;
--font: #F5F1F1;
}
body{
width: 1920px;
max-width: 1920px;
background-color: var(--bg1);
}
.separator{
width: 80%;
margin: auto;
padding: 150px 0;
}
.line{
border-top: 1px solid var(--bg2);
}
html{
max-width: 1920px;
}
/* HEADER */
header{
width: 1920px;
height: 100px;
position: relative;
}
.header-container{
margin: auto;
width: 1520px;
height: inherit;
display: flex;
border-bottom: 1px solid black;
}
.header-container nav{
width: 50%;
height: inherit;
}
.logo{
position: relative;
bottom: 32px;
}
.nav-right{
display: flex;
justify-content: flex-end;
}
.nav-right ul{
width: 75%;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
#nav-link{
display: flex;
display: inline-block;
}
#nav-link a{
float: right;
text-decoration: none;
color: black;
}
.nav-right h2{
font-size: 19px;
}
/* MAIN */
main{
display: flex;
flex-direction: column;
height: 800px;
width: 1920px;
margin: auto;
}
/* HERO */
.hero{
width: inherit;
height: inherit;
/* background-color: teal; */
}
.hero-container{
height: inherit;
display: flex;
justify-content: center;
}
#hero-half{
width: 100%;
/* border: 1px solid red; */
}
.hero-left{
display: flex;
justify-content: end;
}
.hero-left .container{
width: 79%;
height: 80%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.name-intro h2{
color: var(--green);
font-size: 18px;
}
.name-intro h2{
}
.info-box{
position: relative;
top: 100px;
width: 50%;
background-color: var(--green);
padding: 15px;
border-radius: 3px;
box-shadow:-20px -10px var(--bg2);
}
.slogan{
color: white;
font-size: 20px;
letter-spacing: 1.1px;
line-height: 1.3;
text-align: center;
}
.hero-right{
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.img-container{
display: flex;
justify-content: center;
align-items: center;
background-color: var(--green);
width: 650px;
height: 650px;
border-radius: 3px;
background-image: url('./bg texture3.jpg');
background-blend-mode: multiply;
}
.me-img{
position: relative;
right: 75px;
width: 400px;
height: 560px;
}
.me-img img{
width: inherit;
height: inherit;
}
I Use a separator to add space and a horizontal line between the different sections of my webpage so they aren't touching, but whenever I either add margin or padding to the bottom of it the entire width of the page grows a tiny bit and now there's the sidescroll option. The extra width also appears when I add bottom margin directly to the sections themselves. Any help would be appreciated!
I've tried adding max-width to the page, but it still expands.
In your body and header, try changing width: 1920px; to max-width: 100%;. Also, in "hero-left", you may want to change that to "max-width" as well. In most cases, you wouldn't want to use width: 100%;
I am currently creating a bit of a fun project. For some reason, my text and check / radio boxes do not align with the text. They seem to be off to one side and higher than the text.
Here is my pen - https://codepen.io/Amnesia180/pen/RwKQOKP
html,
body {
line-height: 1.5;
height: 100%;
margin: 0 auto;
font-family: 'Quicksand', sans-serif;
color: #070707;
}
header {
position: relative;
top: 0;
padding: 0;
background-color: #EFEFEF;
width: 100%;
height: 60px;
}
.material-icons {
color: #505050;
}
#nav-bar {
position: relative;
display: flex;
justify-content: space-between;
padding: 10px;
}
ul {
display: flex;
padding: 0;
list-style: none;
}
li {
padding: 0px 20px;
}
.nav-link-left {
float: left;
text-decoration: none;
color: #070707;
font-weight: 800;
}
.nav-link {
float: right;
text-decoration: none;
color: #070707;
font-weight: 800;
}
.nav-link:hover {
float: right;
color: #5873D9;
border-bottom: 3px solid #5873D9;
padding-bottom: 5px;
}
#intro {
display: flex;
flex-direction: column;
align-items: center;
height: 470px;
margin-top: 50px;
max-width: 90em;
}
h1 {
font-size: 4em;
color: #34D1BF;
}
h2 {
color: #5873D9;
margin-top: 20px;
}
form {
display: flex;
flex-direction: column;
}
label {
font-size: 1.5em;
padding: 10px 0;
}
input {
width: 100%;
height: 30px;
border: 2px solid #34D1BF;
padding: 5px;
}
#submit {
background-color: #34D1BF;
width: 40%;
height: 40px;
margin-top: 15px;
margin-left: 30%;
margin-right: 30%;
border: 2px solid #34D1BF;
color: white;
}
#about,
#promo-image,
#burger {
max-width: 50em;
width: 90vw;
margin: 0 auto;
padding: 5px;
text-align: left;
}
#promoimage {
display: block;
margin: 0 auto;
max-width: 518px;
width: 100%;
}
#burgers {
margin-top: 40px;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: space-around;
}
.box {
border: 2px solid #EFEFEF;
border-radius: 5px;
margin: 2px;
text-align: center;
}
.price {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.price li {
padding: 30px;
border: 0.5px solid #EFEFEF;
}
.card-header {
background-color: rgba(52, 209, 191, 1);
color: white;
}
footer {
width: 100%;
background-color: #EFEFEF;
height: 80px;
text-align: center;
}
footer p {
padding-top: 20px;
}
.burgerform {
text-align: left;
display: inline;
}
.burgerform label {
font-size: 1.5em;
font-weight: bold;
}
.burgerform legend {
font-weight: bold;
}
#media (min-width: 600px) {
#intro {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
#burgers {
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
justify-content: space-between;
}
}
<label>Sauces</label>
<p/> Burger Sauce <input type="checkbox" id="burgersauce" name="burgersauce" onclick="calculateTotal()"> Dirty Mayo Sauce
Can anyone advise?
Thanks!
Your inputs have width: 100%; which means it'll occupy entire width. And the "label" is just plain text so they are just flowing into the next line.
If you want to align them then you need proper elements (label>) aligned within 100% of the same line.
That is because you have given your inputs a width of 100%, so now each checkbox and radiobutton spans the whole width of the screen.
input {
width: 100%;
height: 30px;
border: 2px solid #34D1BF;
padding: 5px;
}
You can debug CSS issues using the CSS developer tools of your browser, as in the attached screenshot
Wrap both label (eg. Burger Mayo Sauce) and checkbox within a Flex-box, apply 100% width to it, and justify-content:space-between.
.menu-item{
witdh: 100%;
display:flex;
justify-content:space-between;
}
input[type=checkbox]{
//Whatever styling you want to apply to the checkbox.
}
Do not add the 100% width to the input, flexbox will manage the space for you.
The logo element in this page is not centering vertically within the <header> container. The problem is more pronounced on mobile than on desktop. The second element (#forum-link) is aligning correctly.
The flexbox align-items:center rule seems to work for one child div but not the other. Why is that the case and how do you fix it?
html {
max-width: 780px;
margin: 0 auto;
}
body {
background-image: url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
background-size: 116px;
background-repeat: repeat-x;
}
header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
height:116px;
}
#logo {
margin-left: 15px;
}
#forum-link {
max-width: 110px;
margin-right: 35px;
}
#forum-link a {
color: white;
text-decoration: none;
font-weight: bold;
font-size: x-large;
}
#media only screen and (orientation: portrait) {
html {
margin: 0;
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
header {
display: block;
width: 100%;
position: relative;
height: auto;
margin-bottom: 50px;
}
#logo {
margin: initial;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link {
margin: initial;
max-width: initial;
background: #323232;
height: 27px;
position: absolute;
bottom: -50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link a {
font-weight: bold;
font-size: .9em;
}
#forum-link a:hover {
text-decoration: underline;
}
<body>
<header>
<div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
<div id="forum-link">Join our Forums!</div>
</header>
</body>
EDIT: Clarified the question
Umm, I think this is what you're after: logo and link is vertically centred on the bg? Only updated for non-mobile solution.
Also, as I said in my comment, repeated here for comprehensiveness: your image isn't vertically centring because it's the height of its parents: the #logo and header.
The link has a smaller height than the header, so it's vertically centring.
If you're referring to the 5px or so of space, just throw a display: block on your #logo's image to remove that spacing. It will still be the height of its parents though.
My solution basically gives your body a height, flex it and your header aligns itself vertically centred.
html {
max-width: 780px;
margin: 0 auto;
}
body {
background-image: url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
background-size: 116px;
background-repeat: repeat-x;
height: 116px;
margin: 0;
display: flex;
}
header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
width: 100%;
}
#logo {
margin-left: 15px;
}
#logo img {
display: block;
}
#forum-link {
max-width: 110px;
margin-right: 35px;
}
#forum-link a {
color: white;
text-decoration: none;
font-weight: bold;
font-size: x-large;
}
#media only screen and (orientation: portrait) {
html {
margin: 0;
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
header {
display: block;
width: 100%;
position: relative;
height: auto;
margin-bottom: 50px;
}
#logo {
margin: initial;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link {
margin: initial;
max-width: initial;
background: #323232;
height: 27px;
position: absolute;
bottom: -50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link a {
font-weight: bold;
font-size: .9em;
}
#forum-link a:hover {
text-decoration: underline;
}
<body>
<header>
<div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
<div id="forum-link">Join our Forums!</div>
</header>
</body>
Just add margin: 0 in body :
html {
max-width: 780px;
margin: 0 auto;
}
body {
background-image: url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
background-size: 116px;
background-repeat: repeat-x;
margin: 0;
}
header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
height:116px;
}
#logo {
margin-left: 15px;
}
#forum-link {
max-width: 110px;
margin-right: 35px;
}
#forum-link a {
color: white;
text-decoration: none;
font-weight: bold;
font-size: x-large;
}
#media only screen and (orientation: portrait) {
html {
margin: 0;
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
header {
display: block;
width: 100%;
position: relative;
height: auto;
margin-bottom: 50px;
}
#logo {
margin: initial;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link {
margin: initial;
max-width: initial;
background: #323232;
height: 27px;
position: absolute;
bottom: -50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link a {
font-weight: bold;
font-size: .9em;
}
#forum-link a:hover {
text-decoration: underline;
}
<body>
<header>
<div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
<div id="forum-link">Join our Forums!</div>
</header>
</body>
You need to specify the width of your parents for it to center vertically. And then add text-align: center;. Change the styles of your #logo and #forum-link as below.
#logo {
flex: 1;
width: 50%;
text-align: center;
}
#forum-link {
max-width: 110px;
flex: 1;
width: 50%;
text-align: center;
}
I removed your margins because the preview here is very small and you wont notice that the elements were centered vertically. Feel free to put it back in your source code. Check code below
html {
max-width: 780px;
margin: 0 auto;
}
body {
background-image: url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
background-size: 116px;
background-repeat: repeat-x;
}
header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 23px;
}
#logo {
flex: 1;
width: 50%;
text-align: center;
}
#forum-link {
max-width: 110px;
flex: 1;
width: 50%;
text-align: center;
}
#forum-link a {
color: white;
text-decoration: none;
font-weight: bold;
font-size: x-large;
}
#media only screen and (orientation: portrait) {
html {
margin: 0;
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
header {
display: block;
width: 100%;
position: relative;
height: auto;
margin-bottom: 50px;
}
#logo {
margin: initial;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link {
margin: initial;
max-width: initial;
background: #323232;
height: 27px;
position: absolute;
bottom: -50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link a {
font-weight: bold;
font-size: .9em;
}
#forum-link a:hover {
text-decoration: underline;
}
<body>
<header>
<div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
<div id="forum-link">Join our Forums!</div>
</header>
</body>
did this for my homepage and wanted to background image content to be the middle of the image as the display size decreases (right now it slides the content of the image to the left). Thought of media query but Client only allows for one add-on of CSS, not different stylesheet files.
Also, although stated * margin= 0; padding=0 a margin appears on my smartphone (Iphone 6) and want it to be clear full screen as in desktop. Make browser pretty small to see if from laptop/desktop.
It has to be CSS ONLY since my client (Smugmug) only allows for blocks of css and html on it, no javascript or whatsoever. Also adds its own CSS to the page so I can post the link if needed.
Any idea for the dynamic positioning of the images and the margins? Thanks!
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding; 0;
}
body {
display: flex;
flex-direction: column;
}
h1 {
margin: 0;
}
a {
display: inline-block;
}
#business-top {
display: flex;
flex: 1;
height:50vh;
width: 100%;
align-items: center;
justify-content: center;
text-align: center;
background-image : url(https://lluisballbe.smugmug.com/Assets-for-website/i-2KvXfrk/0/X3/_MG_9556-X3.jpg
);
background-size:cover;
}
#business-button {
transition: all 1s;
-webkit-transition: all 1s;
height: 3em;
width: 12em;
background-color: #2B2A2A;
border: .2em solid #ff7600;
border-radius: 1.8em;
margin: auto;
text-align:center;
}
#logo-separator {
text-align: center;
top: calc( 50%-height_of_separator)px;
}
.separator {
display: block;
position: relative;
padding: 0;
height: 0;
width: 100%;
max-height: 0;
font-size: 1px;
line-height: 0;
flex: 0;
border-top: 1px solid #ff7600;
border-bottom: 1px solid #ff7600;
}
#logo {
margin: auto;
max-width: 150px;
display: inline-block;
overflow: hidden;
margin: -75px;
position: absolute;
z-index:1;
}
#photography-bottom {
display: flex;
flex: 1;
width: 100%;
height:50vh;
align-items: center;
justify-content: center;
background-image : url(https://lluisballbe.smugmug.com/Assets-for-website/i-gPg5QBt/0/X3/_DSC5313-X3.jpg
);
background-size:cover;
}
#photography-button {
height: 3em;
width: 12em;
background-color: #2B2A2A;
border: .2em solid #ff7600;
border-radius: 1.8em;
margin: auto;
}
h1 {
color: #ff7600;
text-align: center;
font-size: 1.4em;
vertical-align: middle;
line-height: 2.2em
}
#business-top,
#photography-bottom {
pointer-events: none;
position: relative;
transition: 1s;
min-height: 200px;
}
#business-top a,
#photography-bottom a {
pointer-events: auto;
}
<div id="business-top">
<a href="www.lluisballbe.smugmug.com">
<div id="business-button">
<h1>PHOTOGRAPHY</h1>
</div>
</a>
</div>
<div id="logo-separator">
<div class="separator"></div>
<div id="logo"><img src="https://lluisballbe.smugmug.com/Assets-for-website/i-CsMnM3R/0/Th/800x800-round-Th.png"> </div>
</div>
<div id="photography-bottom">
<a href="www.lluisballbe.smugmug.com">
<div id="photography-button">
<h1>BUSINESS</h1>
</div>
</a>
</div>
you need to use background-position if you want to position a background image.
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
h1 {
margin: 0;
}
a {
display: inline-block;
}
#business-top {
display: flex;
flex: 1;
height:50vh;
width: 100%;
align-items: center;
justify-content: center;
text-align: center;
background-position: center center;
background-image : url(https://lluisballbe.smugmug.com/Assets-for-website/i-2KvXfrk/0/X3/_MG_9556-X3.jpg
);
background-size:cover;
}
#business-button {
transition: all 1s;
-webkit-transition: all 1s;
height: 3em;
width: 12em;
background-color: #2B2A2A;
border: .2em solid #ff7600;
border-radius: 1.8em;
margin: auto;
text-align:center;
}
#logo-separator {
text-align: center;
top: calc( 50%-height_of_separator)px;
}
.separator {
display: block;
position: relative;
padding: 0;
height: 0;
width: 100%;
max-height: 0;
font-size: 1px;
line-height: 0;
flex: 0;
border-top: 1px solid #ff7600;
border-bottom: 1px solid #ff7600;
}
#logo {
margin: auto;
max-width: 150px;
display: inline-block;
overflow: hidden;
margin: -75px;
position: absolute;
z-index:1;
}
#photography-bottom {
display: flex;
flex: 1;
width: 100%;
height:50vh;
align-items: center;
justify-content: center;
background-position: center center;
background-image : url(https://lluisballbe.smugmug.com/Assets-for-website/i-gPg5QBt/0/X3/_DSC5313-X3.jpg
);
background-size:cover;
}
#photography-button {
height: 3em;
width: 12em;
background-color: #2B2A2A;
border: .2em solid #ff7600;
border-radius: 1.8em;
margin: auto;
}
h1 {
color: #ff7600;
text-align: center;
font-size: 1.4em;
vertical-align: middle;
line-height: 2.2em
}
#business-top,
#photography-bottom {
pointer-events: none;
position: relative;
transition: 1s;
min-height: 200px;
}
#business-top a,
#photography-bottom a {
pointer-events: auto;
}
<div id="business-top">
<a href="www.lluisballbe.smugmug.com">
<div id="business-button">
<h1>PHOTOGRAPHY</h1>
</div>
</a>
</div>
<div id="logo-separator">
<div class="separator"></div>
<div id="logo"><img src="https://lluisballbe.smugmug.com/Assets-for-website/i-CsMnM3R/0/Th/800x800-round-Th.png"> </div>
</div>
<div id="photography-bottom">
<a href="www.lluisballbe.smugmug.com">
<div id="photography-button">
<h1>BUSINESS</h1>
</div>
</a>
</div>
add this css property to your both divs
background-position: center;
as example like this
#business-top {
display: flex;
flex: 1;
height:50vh;
width: 100%;
align-items: center;
justify-content: center;
text-align: center;
background-image : url(https://lluisballbe.smugmug.com/Assets-for-website/i-2KvXfrk/0/X3/_MG_9556-X3.jpg);
background-position: center;
}
do like this for your other div and try.