I have a problem with this code I am working on. There's a white space at the bottom of the page at 1024px width and higher that I can't get rid of.
I've tried adding a padding-bottom, checking margins, checking heights, but nothing works. I'm still a beginner so I might've missed something. Any help will be appreciated. Thanks
Screenshot
Screenshot 2
I tried the height: calc(100vh-21px); and this happened
Screenshot 3
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* STYLING */
body{
background: hsl(0, 100%, 98%);
}
/* HEADER */
.logo{
width: 28%;
margin: 1.5em;
}
.hero-mobile{
width: 100%;
}
.hero-desktop{
display: none;
}
.logo-desktop{
display: none;
}
/* MAIN SECTION */
.main{
text-align: center;
font-family: 'Josefin Sans', sans-serif;
color: hsl(0, 36%, 70%);
font-weight: 300;
font-size: 16px;
margin: 2em;
}
h1{
text-transform: uppercase;
font-weight: 300;
font-size: 2.5rem;
margin: 1em auto;
letter-spacing: 12px;
}
.soon{
font-weight: 600;
color: black;
}
.main p{
line-height: 1.5em;
}
/* EMAIL */
.email-form{
text-align: center;
width: 100%;
}
.email{
border-radius: 40px;
border: 1px solid;
color: hsl(0, 36%, 70%);
width: 70%;
height: 50px;
padding: 0px 25px;
}
.email::placeholder{
color: hsl(0, 36%, 70%);
}
.email:focus{
outline: none;
}
.btn{
width: 70px;
height: 53px;
border-radius: 40px;
border-style: none;
background:
linear-gradient(135deg, hsl(0, 80%,86%), hsl(0, 74%, 74%));
position: absolute;
right: 10%;
box-shadow: 0 5px 20px 0 hsl(0, 36%, 70%);
}
footer{
margin: 10% auto 1% auto;
}
#media only screen and (min-width: 600px){
.main{
margin: 9% 15%;
}
.main h1{
font-size: 4rem;
}
.email{
width: 50%;
}
.btn{
right: 25%;
}
.btn:hover{
width: 90px;
box-shadow: 0 5px 20px 0 hsl(0, 36%, 70%);
background:
linear-gradient(135deg, hsl(0, 80%,86%), hsl(0, 74%, 86%));
cursor: pointer;
transition: width 0.5s;
}
.btn:active{
outline: none;
}
}
/* BIG SCREEN */
#media only screen and (min-width: 1024px){
.logo{
display: none;
}
.logo-desktop{
display: block;
}
.hero-mobile{
display: none;
}
.container{
display: flex;
flex-direction: row-reverse;
height: 100vh;
max-width: 1920px;
margin-left: auto;
margin-right: auto;
}
/* MAIN SECTION */
.hero{
/* fixed resizing by putting image in css instead of html */
background: url(../images/hero-desktop.jpg) no-repeat center;
background-size: cover;
width: 40%;
}
.left{
background: url(../images/bg-pattern-desktop.svg) no-repeat center ;
background-size: cover;
width: 60%;
height: auto;
}
.text-area{
position: relative;
max-height: 1080px;
height: 100%;
}
.logo-desktop{
width: 20%;
position: absolute;
left: 20%;
top: 5%;
}
.main{
margin: 0;
padding: 0;
text-align: left;
width: 50%;
position: relative;
left: 20%;
top: 25%;
}
.main h1{
margin: 5% auto;
padding: 0;
font-size: 5em;
}
.main p{
line-height: 1.5em;
word-spacing: 3px;
}
.email-form{
margin: 0;
text-align: left;
position: absolute;
left: 19%;
bottom: 10%;
width: 60%;
height: 60px;
}
.email{
width: 70%;
height: 100%;
}
.btn{
position: absolute;
width: 110px;
height: 100%;
}
footer{
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="css/style.css">
<title>Frontend Mentor | Base Apparel coming soon page</title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600&display=swap" rel="stylesheet">
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<header>
<img class ="logo" src="images/logo.svg" alt="Base Apparel logo">
</header>
<div class="container">
<div class="hero">
<img class="hero-mobile" src="images/hero-mobile.jpg" alt="Base Apparel model">
</div>
<div class="left">
<div class="text-area">
<img class ="logo-desktop" src="images/logo.svg" alt="Base Apparel logo">
<section class="main">
<h1> We're <br> <span class="soon">
coming <br>
soon </span> </h1>
<p>Hello fellow shoppers! We're currently building our new fashion store.
Add your email below to stay up-to-date with announcements and our launch deals.</p>
</section>
<form class="email-form">
<input class="email" id="email"type="email" placeholder="Email Address" required>
<button class="btn" id="submit" type="submit">
<img src="images/icon-arrow.svg" alt="arrow icon">
</button>
</form>
<footer>
<p class="attribution">
Challenge by Frontend Mentor.
Coded by Ken Yasuge.
</p>
</footer>
</div>
</div>
</div>
</body>
</html>
Please use Chrome DevTools and inspect your text-area div, you will notice that the text area div is not starting at the top. And the problem is with a 5% top margin of your h1 inside the main class.
You can either
Use padding instead of margin: .main h1 { margin: 0; padding: 5% 0 }
Or set margin-top to 0 after the margin you're already using .main h1 { margin-top: 0 }
In your CSS file you have written an media query for BIG SCREEN. In that media query search for text-area class. And change height 100% to this -
.text-area {
position: relative;
max-height: 1080px;
height: calc(100vh - 21px);
}
Please try these. it will work
Firstly put footer under container:
<div class="container">
...
</div>
<footer>
...
</footer>
Then add styles for body :
body {
background: hsl(0, 100%, 98%);
min-height: 100%;
position: absolute;
}
and add style for footer :
footer {
position: inherit;
bottom: 0;
width: 100%;
}
Related
I am using a card-based layout from codepen and each card contains an image. On codepen, I am able to resize and adjust the image that appears on the card with no issues. However, when implementing the same exact html code and stylesheet on my browser, the image I am resizing does not respond to any changes made to code contained within "{ img" like it does on codepen. While I was able to adjust the margins of the card wrap to make things appear as I desire, I am wondering what the root of the issue is with my code. Thanks!
<!--DOCTYPE html-->
<html lang="en">
<head>
<html>
<link href="home.css" type="text/css" rel="stylesheet" />
<title>Purple Moss</title>
<!-- inspiration: https://dribbble.com/shots/3784003-Plant-description-page -->
<div class="wrap">
<div class="card">
<div class="card-pic-wrap">
<img src="https://imagizer.imageshack.com/v2/320x240q90/922/MeU4GZ.png" alt="A leafy plant">
</div>
<div class="card-content">
<h3>summary:</h3>
<p>Blossom dorset heath scabious ipsum. Grape hyacinth bee balm bird of paradise obedient plant african lily lily. Spring foxglove florist’s nighmare primrose.</p>
<p>So leafy</p>
</div>
</div>
<div class="card">
<div class="card-pic-wrap">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1145795/plant-4.png" alt="Some pointy plants">
</div>
<div class="card-content">
<h3>Some pointy ones</h3>
<p>Florem ipsum sugarbush bloom red rose waxflower coneflower ginger. Saxifrage forget-me-not obedient plant.</p>
<p>I'll take 10</p>
</div>
</div>
</div>
</html>
/* CSS */
$b-r: 5px;
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
background: #eee;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: "Courier New", Courier, monospace;
}
.wrap {
height: 100%;
}
.card {
display: flex;
flex: 0 0 auto;
background: #fff;
max-width: 700px;
margin: 80px 0;
border-radius: $b-r;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.card-pic-wrap {
border-radius: $b-r 0 0 $b-r;
width: 200px;
flex: 0 0 auto;
position: relative;
background: linear-gradient(to bottom, #f5e4b5, #a19ad9);
img {
position: relative;
bottom: 3em;
left: 50%;
margin-left: -175px;
width: 350px;
-webkit-box-reflect: below -1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(90%, transparent), to(rgba(250, 250, 250, 0.15)));
}
}
.card-content {
padding: 3em 4em 2em;
}
h3 {
font-family: "Courier New", Courier, monospace;
font-weight: bold;
font-size: 2.5em;
margin: 0 0 1em;
}
a {
background: #f5e4b5;
color: #15077d;
padding: 0 25px;
height: 50px;
font-size: 0.8em;
letter-spacing: 1px;
line-height: 50px;
display: inline-block;
border-radius: 25px;
text-decoration: none;
margin-top: 1.5em;
text-transform: uppercase;
border: 1px solid rgba(0,0,0,0.1);
&:hover {
background: #15077d;
color: #f5e4b5;
border: 2px dotted #f5e4b5;
}
}
#media (max-width: 790px) {
body {
overflow-x: hidden;
}
.wrap {
margin-left: 20px;
margin-right: 20px;
}
.card {
flex-direction: column;
margin-top: 50px;
margin-bottom: 50px;
}
.card-pic-wrap {
width: 100%;
border-radius: $b-r $b-r 0 0;
img {
bottom: 20px;
position: relative;
}
}
.card-content {
padding: 2em 2em 1em;
}
}
Never mind, I think I found the issue.
The template code I was using on codepen contained the "img {" within the ".card-pic-wrap {" and did not close off "img {" with closing bracket "}." Rather, it closed off both of these elements with double brackets, which worked fine in codepen but not in browser.
I have been working on this website and I have it coded looking perfect on my computer and perfect when I shrink it to mobile size. But, when I look at it on my laptop, the DIV with the text on the left is always either bumped up or bumped down out of place. Also on the laptop, in mobile size there is an unwanted space between the image/boxes. What would be the easiest way to work around this ? Am I setting everything up wrong? Plus, how can I account for every screen size and resolution? It seems maybe the text box could be done differently or something, to make it stay in place easier.
Any help would be GREATLY appreciated!
Head:
<!DOCTYPE html>
<html>
<title>Jesse Ellis | Personal Chef</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Caladea&display=swap" rel="stylesheet">
CSS:
<style>
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
body, html {
height: 100%;
line-height: 1.8;
margin: 0;}
.firstrowpad{padding-top:0px; height: 50%; padding-bottom:0px;}
h1,h4,h5,h6 {font-family: 'Caladea', serif;}
h3{
font-family: 'Caladea', serif;
font-weight: normal;
font-size: 4em;
}
h2{
font-family: 'Caladea', serif;
font-weight: normal;
font-size: 2em;
}
.bgoverlay {
position: relative;
background-image: url("https://eaternalzest.com/wp-content/uploads/2019/04/08.0_Seafire_180219.jpg");
background-size: auto;
}
.bgimg-1 {
background-position: center top;
background-repeat: no-repeat;
top: 0;
background-size: 100%;
min-height: 71%;
}
.bgoverlay:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
opacity: 0.9;
background-color: #053426;
}
.FirstRow{
background-image: url("https://miro.medium.com/max/9792/1*-xHF1a7BT8hN8KsHbQCDSw.jpeg");
background-position: right;
background-color: #f1f1f1;
background-repeat: no-repeat;
background-size: 50%;
}
.HeaderFont{
font-size: 1.5em;
top: 4%;
width: 20%;
left: 51%;
position: relative;
background: #ffffff;
opacity: 0.9;
line-height: 19pt;
padding: 20px;
padding-top: 30px;
padding-bottom: 30px;
letter-spacing: 2px;
font-family: 'Caladea', serif;
border-right: solid #ccc 0px;
border-radius: 25px;
}
.HeaderBlog{
font-size: 1.5em;
top: -24%;
width: 47.7%;
height: 91%;
overflow: hidden;
left: 1%;
position: relative;
background: #ffffff;
line-height: 30pt;
padding: 30px;
font-family: 'Caladea', serif;
padding-bottom: 240px;
padding-top: 90px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 20px solid #BF845C;
}
hr.solid {
border-top: 15px solid #733938;
content: '';
}
#media screen and (max-width: 900px) {
.FirstRow {
background-size: 100%;}
.HeaderFont{
display: none;}
.HeaderBlog{
display: none;}
.HeaderBlog2{
font-size: 1.5em;
top: 250%;
width: 100%;
height: 50%;
overflow: hidden;
position: static;
background: #ffffff;
padding: 30px;
display: inline-block;
}
.bgimg-1 {
background-position: center top;
background-repeat: no-repeat;
top: 0;
background-size: 100%;
min-height: 51%;
}
}
#media screen and (min-width: 1024px) {
.HeaderBlog2{
display: none;}
}
</style>
HTML:
<header class="bgimg-1 bgoverlay">
</header>
<div class="FirstRow firstrowpad">
<div class="HeaderFont"><center> ❝ A dining experience <br>from the comfort of <br>your own <i>home</i>. ❞</center></div>
<div class="HeaderBlog">
<font style="font-size: 2em;"> J</font>esse Ellis is a personal chef for hire in Wilmington, NC and the surrounding area. Wether you are hosting, having a party, or just dinner with the family, he will cook in your kitchen
and deliver custom quality meals. All you have to do is sit back and enjoy the food!<p><p>
<hr class="solid"></hr>
</div>
</div>
<div class="HeaderBlog2">
<center>
Jesse Ellis is a personal chef for <br>hire in the Wilmington, NC area. <br>
Specializing in all types of foods, <br>
he cooks in your kitchen to deliver quality meals.<p><p>
</center>
<hr class="solid">
</div>
</div>
Here's what it currently looks like:
What's supposed to be the header is currently transparent over the body image. I'm trying to get it to sit behind where it says "NEWS" at the top. The header image is currently inserted with <img src="https://i.imgur.com/wLTnUyF.png"> and I don't know what to add to reposition it.
(I can also add additional details if this isn't enough to get the answer I'm looking for.)
Edit: Here's the whole code: PASTEBIN
* {
background: transparent;
border: none;
margin: 0;
padding: 0;
}
.gr1,
.gr2,
.gr3,
.gr-top .tri,
.gr-top .gr h2 img,
.gr-top .gr span {
display: none;
}
.gr-top .gr {
padding-left: 0 !important;
}
/* body { background-image: url('https://i.imgur.com/iYr6KIy.png'); background-repeat: no-repeat; background-size: 950px 540px; } */
h3 {
font-size: 25px;
text-align: center;
color: #c8b46e;
background-repeat: no-repeat;
background-size: 400px;
background-position: center center;
padding: 20px;
background-image: url("https://i.imgur.com/RbBgBbv.png");
}
.scrollbox {
height: 360px;
width: 420px;
overflow: auto;
padding: 20px;
font-family: Ubuntu;
font-size: medium;
color: #aaa89e;
background: transparent;
}
.scrollbox2 {
height: 100px;
width: 360px;
overflow: auto;
padding: 20px;
font-family: Ubuntu;
font-size: medium;
color: #aaa89e;
background: transparent;
}
.gr-body .gr .grf-indent .text {
max-width: 500px;
}
.gr-body .gr .grf-indent .bottom {
position: relative;
bottom: 160px;
left: 10px;
color: #fff;
}
.gr-body .gr .grf-indent .bottom a {
color: #fff;
}
.gr-body .gr .grf-indent .bottom a:hover {
color: #c8b46e;
}
a:hover {
cursor: url(https://i.imgur.com/dg8PzHg.png), pointer;
}
body {
cursor: url(https://i.imgur.com/dg8PzHg.png), pointer;
}
.container {
position: relative;
}
.bottomleft {
position: relative;
top: 60px;
left: 10px;
font-size: 18px;
}
.topright {
position: relative;
bottom: 444px;
left: 510px;
font-size: 18px;
}
.top {
position: absolute;
top: 0px;
width: 500px;
}
img.back {
margin-top: 70px;
width: 940px;
height: 540px;
}
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='wrap'>
<h3>NEWS</h3>
<img class="top" src="https://i.imgur.com/wLTnUyF.png">
<img class="back" src="https://i.imgur.com/iYr6KIy.png">
</div>
</body>
</html>
I am not sure what you are trying to do. But if you are trying to add an image to the header, you should do:
<!DOCTYPE html>
<html>
<header>
<img src="https://i.imgur.com/wLTnUyF.png">
</header>
<body>
<img src="bodyimage.png">
</body>
</html>
If that doesn't work, remember to actually download the image and upload it into your workspace.
I ended up figuring up a way to get the results I wanted.
What I did is I added a background specifically to .gr-top .gr h2 and then change the alignment on the text.
Now my journal skin looks like this ; Updated Preview
.gr-top .gr h2{
text-align: right;
background-repeat: no-repeat;
background-position: left left;
padding: 33px;
background-size: 600px;
background-image: url("https://i.imgur.com/wLTnUyF.png");
}
Sorry for the bad phrasing on the question. I'll try to be clearer next time.
I just finished developing my first web page using flexbox. It looks great on my screen resolution (1326x768) but when I test it on a larger screen (1894x787), the content looks crazy stretched. Below are the screen shots:
At 1326x768
At higher screen resolution
Codepen
I had used flex: 1 1 60% on some elements (the % varies of course), but making flex-grow: 0 doesn't really do anything.
I have only set fixed parameters for the containers of images (fixed heights). I haven't set fixed widths for any container.
Am I missing something with flex boxes here?
I guess media queries might be one way to solve this problem but is there any other solution, a more robust way to develop using flex?
How can I make the page look the way it is meant to in all screen sizes not stretched or overly compressed?
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
* {
box-sizing: border-box;
}
p {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.margin-end {
margin-bottom: 40px;
}
.margin-start {
margin-top: 10px;
}
header {
display: flex;
flex-direction: row;
justify-content: space-between;
color: #6e6e6e;
font-family: AvenirLTStd-Roman;
font-weight: bolder;
font-size: 1rem;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.11);
/*box-shadow: 0px 10px 5px -9px rgba(0,0,0,0.75);*/
/*border-bottom: solid 1px #ececec;*/
}
.banner-heading {
margin-left: 350px;
font-weight: bolder;
font-size: 1.875rem;
}
.secondary-heading {
/* border: solid;
*/
display: flex;
flex-direction: row;
margin-right: 60px;
font-size: 0.8rem;
justify-content: center;
position: relative;
/* margin: auto;
*/
}
.secondary-heading-1 {
padding-right: 60px;
/* vertical centering */
position: relative;
top: 50%;
transform: translateY(-50%);
font-weight: lighter;
}
.secondary-heading-2 {
/* vertical centering */
position: relative;
top: 50%;
transform: translateY(-50%);
color: #6e6e6e;
font-weight: lighter;
}
.secondary-heading-1 a,
.secondary-heading-2 a {
color: #6e6e6e;
}
.main-content {
display: flex;
flex-direction: row;
/* border:solid;
*/
margin-left: 350px;
margin-right: 60px;
}
.main-content-left {
/* border:dashed;*/
/*width: 200px;
height: 200px;*/
display: flex;
flex-direction: column;
flex: 0 1 60%;
padding-right: 20px;
}
.main-content-left-heading {
width: 100%;
border-bottom: solid 1px #959595;
padding-bottom: 20px;
padding-top: 20px;
}
.main-content-right {
/*border: dashed;*/
/*width: 200px;
height: 200px;*/
margin-left: auto;
flex: 0 1 40%;
}
.main-content-left-heading p {
/*margin:0;
padding:0;*/
line-height: 100%;
}
.main-content-left-heading-1 {
font-family: AvenirLTStd-Roman;
font-style: italic;
color: #6e6e6e;
}
.main-content-left-heading-2 {
padding-top: 5px;
font-family: AvenirLTStd-Roman;
color: #6e6e6e;
font-weight: bolder;
font-size: 1.5rem
}
.main-content-left-image-1 {
padding: 0;
margin: 0;
/* border: solid;
*/
width: 100%;
height: 360px;
background-image: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/010fa5bb-20b9-4603-8e31-3a5e053d936f.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
.main-content-left-image-2 {
padding: 0;
margin: 0;
/* border: solid;
*/
width: 100%;
height: 360px;
background-image: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/a49ee715-cd02-4b16-9164-941585e2fbbe.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.main-content-left-image-3 {
padding: 0;
margin: 0;
/* border: solid;
*/
width: 100%;
height: 360px;
background-image: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.main-content-left-text {
/* border:solid;
*/
display: flex;
flex-direction: row;
margin-top: solid;
padding-top: 20px;
/* padding-bottom: 20px;
*/
}
.main-content-left-text-group-left {
padding: 10px 60px 10px 0px;
}
.main-content-left-text-group-left-1 {
padding-bottom: 10px;
font-family: SourceSansBold;
font-size: 0.875rem;
font-weight: 900;
}
.main-content-left-text-group-left-2 {
font-family: SourceSansBold;
font-size: 0.875rem;
color: #888585;
font-weight: 900;
}
.main-content-left-text-group-right {
padding: 10px;
border-left: solid 1px #959595;
}
.main-content-left-text-group-right-1 {
font-family: Avenir-Next-LT-Pro-Demi;
font-size: 1.45rem;
padding-bottom: 20px;
color: #444444;
font-weight: bolder;
}
.main-content-left-text-group-right-2 {
font-size: 1rem;
font-family: SourceSansPro-Regular;
}
.main-content-right {
border-left: solid 1px #959595;
margin-top: 20px;
padding-right: 65px;
padding-left: 20px;
display: flex;
flex-direction: column;
}
.main-content-right-heading {
border-bottom: solid 2px #363636;
height: 65px;
display: flex;
}
.main-content-right-heading p {
font-size: 0.9rem;
margin-top: auto;
font-family: SourceSansBolder;
font-weight: bolder
}
.main-content-right-content {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: solid 1px #959595;
}
.main-content-right-image-1 {
width: 100%;
height: 180px;
background: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png") no-repeat;
background-size: 100% 100%;
}
.main-content-right-image-2 {
width: 100%;
height: 180px;
background: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png") no-repeat;
background-size: 100% 100%;
}
.main-content-right-image-3 {
width: 100%;
height: 180px;
background: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png") no-repeat;
background-size: 100% 100%;
}
.main-content-right-group {
/*border:solid;*/
/* padding-bottom: 10px;
*/
}
.main-content-right-group-1 {
padding-top: 10px;
color: #b8b6b6;
font-family: SourceSansBold;
font-size: 0.875rem
}
.main-content-right-group-2 {
padding-top: 10px;
font-family: Avenir-Next-LT-Pro-Demi;
font-weight: bolder;
color: #444444;
font-size: 1.1rem;
}
<header>
<h1 class="banner-heading">Entrepreneurs Weekly</h1>
<div class="secondary-heading">
<h3 class="secondary-heading-1">BECOME A CURATOR</h3>
<h3 class="secondary-heading-2">ABOUT</h3>
</div>
</header>
<div class="main-content">
<div class="main-content-left">
<div class="main-content-left-heading">
<p class="main-content-left-heading-1">Week 008,</p>
<p class="main-content-left-heading-2">How To create the next Steve Jobs</p>
</div>
<div class="main-content-left-heading">
<div class="main-content-left-image-1">
<!-- <img src="assets/WeeklyContent1.png" />
-->
</div>
<div class="main-content-left-text">
<div class="main-content-left-text-group-left">
<p class="main-content-left-text-group-left-1">POLITICS</p>
<p class="main-content-left-text-group-left-2">NYTIMES.COM</p>
</div>
<div class="main-content-left-text-group-right">
<p class="main-content-left-text-group-right-1">New York magazine turns a history of shopping recommendations into a new online revenue stream</p>
<p class="main-content-left-text-group-right-2">Making money from $195 fitted sheets and Japanese women’s facial razors.</p>
</div>
</div>
</div>
<div class="main-content-left-heading">
<div class="main-content-left-image-2">
<!-- <img src="assets/WeeklyContent1.png" />
-->
</div>
<div class="main-content-left-text">
<div class="main-content-left-text-group-left">
<p class="main-content-left-text-group-left-1">POLITICS</p>
<p class="main-content-left-text-group-left-2">NYTIMES.COM</p>
</div>
<div class="main-content-left-text-group-right">
<p class="main-content-left-text-group-right-1">The Texas Tribune updates its premium political coverage for an email</p>
<p class="main-content-left-text-group-right-2">Making money from $195 fitted sheets and Japanese women’s facial razors.</p>
</div>
</div>
</div>
<div class="main-content-left-heading margin-end">
<div class="main-content-left-image-3">
<!-- <img src="assets/WeeklyContent1.png" />
-->
</div>
<div class="main-content-left-text">
<div class="main-content-left-text-group-left">
<p class="main-content-left-text-group-left-1">POLITICS</p>
<p class="main-content-left-text-group-left-2">NYTIMES.COM</p>
</div>
<div class="main-content-left-text-group-right">
<p class="main-content-left-text-group-right-1">The Incline, Billy Penn’s new sister site, launches in Pittsburgh</p>
<p class="main-content-left-text-group-right-2">Like Billy Penn in Philadelphia, the Pittsburgh site will focus on attracting a younger audience through events and aggregation in addition to original reporting.</p>
</div>
</div>
</div>
</div>
<div class="main-content-right">
<div class="main-content-right-heading">
<p>THE LATEST FROM ENTREPRENEUR'S WEEKLY</p>
</div>
<div class="main-content-right-content margin-start">
<div class="main-content-right-image-1">
<!-- image goes as background -->
</div>
<div class="main-content-right-group">
<p class="main-content-right-group-1">WEEK 01</p>
<p class="main-content-right-group-2">New York magazine turns a history of shopping recommendations into a new online revenue stream</p>
</div>
</div>
<div class="main-content-right-content">
<div class="main-content-right-image-2">
<!-- image goes as background -->
</div>
<div class="main-content-right-group">
<p class="main-content-right-group-1">WEEK 01</p>
<p class="main-content-right-group-2">New York magazine turns a history of shopping recommendations into a new online revenue stream</p>
</div>
</div>
<div class="main-content-right-content">
<div class="main-content-right-image-3">
<!-- image goes as background -->
</div>
<div class="main-content-right-group">
<p class="main-content-right-group-1">WEEK 01</p>
<p class="main-content-right-group-2">New York magazine turns a history of shopping recommendations into a new online revenue stream</p>
</div>
</div>
</div>
</div>
This is the source of your problem:
.main-content-left-image-1 {
padding: 0;
margin: 0;
width: 100%; <---- problem
height: 360px; <---- problem
background-image: url("https://gallery.mailchimp.com/f6...");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
.main-content-left-image-2 {
padding: 0;
margin: 0;
width: 100%; <---- problem
height: 360px; <---- problem
background-image: url("https://gallery.mailchimp.com/f6...");
background-size: 100% 100%;
background-repeat: no-repeat;
}
If you tell an image to be width: 100% and height: 360px, consider how that plays out.
The width is always the full length of the container. Whether the screen is wide or narrow, the image goes with it.
But you have set a fixed height of 360px. There's no flexibility there.
As a result, the image is flexible horizontally and inflexible vertically, which leads to a loss of aspect ratio / distortion.
There are several possible solutions to this problem:
Responsive css background images
How to make CSS background-image responsive?
Here is my relevant css (just the phone version. the difference from the computer version is the "(max-width : 1223px)" turns into "(min-width : 1224px)"):
* {
margin: 0;
padding: 0;
}
body {
background: #f5f5f5;
font-family: 'Open Sans', sans-serif;
height: 100%;
margin: 0 0 100px; /* bottom = footer height */
}
html {
position: relative;
min-height: 100%;
}
a {
text-decoration: none;
color: #444;
}
a:hover {
color: blue;
}
section {
background: #fff;
box-shadow: 0px 2px 2px #ebebeb;
}
header {
width: 100%;
margin: 0 auto;
text-align: center;
position: relative;
}
nav li {
display: inline-block;
/*padding: 40px 30px 37px 30px;*/
padding-top: 3%;
padding-right: 2%;
padding-bottom: 3%;
padding-left: 2%;
}
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (max-width : 1223px) {
.logo {
/*background: url(logo.png) 50% 0 no-repeat;*/
background: url(http://i48.tinypic.com/2mob6nb.png);
background-size: 140px 59px;
width: 140px;
height: 59px;
position: absolute;
top: 2%;
/* left: 405px; */
left: 38%;
}
nav li:nth-child(2) {
padding-right: 10%;
}
nav li:nth-child(3) {
padding-left: 10%;
}
}
/* Desktops and laptops ----------- */
#media only screen and (min-width : 1224px) {
.logo {
/*background: url(logo.png) 50% 0 no-repeat;*/
background: url(http://i48.tinypic.com/2mob6nb.png);
background-size: 140px 59px;
width: 140px;
height: 59px;
position: absolute;
top: 20%;
/* left: 405px; */
left: 44%;
}
nav li:nth-child(2) {
padding-right: 10%;
}
nav li:nth-child(3) {
padding-left: 10%;
}
}
#sectionLeft {
width: 48%;
float: left;
padding: 5px;
}
#section {
width: 48%;
float: right;
padding: 5px;
}
#sectionLeft h2, #section h2 {
text-align: center;
}
#wrap {
width: 100%;
margin: 0 auto;
}
#newsSection {
background: #fff;
box-shadow: 0px 2px 2px #ebebeb;
text-align: center;
margin: 0px 0px 10px 0px;
}
#newsText {
font-size: 12px;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 2.5%;
width: 100%;
text-align: center;
background-color: #fff;
-webkit-box-shadow: 0px -2px 2px 0px #ebebeb;
-moz-box-shadow: 0px -2px 2px 0px #ebebeb;
box-shadow: 0px -2px 2px 0px #ebebeb;
bottom: 0;
}
#footerText {
font-size: 10px;
}
and the html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aversion Gaming</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans'
rel='stylesheet' type='text/css'>
<link href='css/style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<header>
<nav>
<ul>
<li>Home</li>
<li>Teams</li>
<li>Contact</li>
<li>Sponsors</li>
</ul>
</nav>
<div class="logo"></div>
</header>
</section>
<div id="wrap">
<div id="sectionLeft">
<h2>News</h2>
<section id="newsSection">
<h3>Test news post</h3>
<p id="newsText">This is just a test news post.</p>
<a style="font-size: 12px;" href="#">Read More...</a>
</section>
<section id="newsSection">
<h3>Finally, a website!</h3>
<p id="newsText">We have finally created a website thanks to
#AversionRastro!</p>
<a style="font-size: 12px;" href="#">Read More...</a>
</section>
</div>
<div id="section">
<h2>About</h2>
<section id="newsSection">
<p id="newsText">
<b>Aversion Gaming</b> is a newly founded gaming organization.
</p>
</section>
</div>
</div>
<footer>
<p id="footerText">Copyright 2014 Aversion Gaming. Designed and
coded by Robert Trainor.</p>
</footer>
</body>
</html>
When I load the page on my Windows 7 laptop, it shows the logo (got it from another post, so its just an example) and all of the formatting code in the #media works.
When I pin the browser to a side on the same computer, the code for the smaller window size doesn't kick in.
The logo never shows and the formatting for the 2nd and 3rd list items don't get their padding.
If there is something I'm missing or doing wrong here, please tell me.
I have checked your code and on my macbook with safari it works just fine (meaning in my browser the source code kicks in correctly by scaling down/up).
Have you checked if the code kicks in (so does it show up in your source code), or does it only not look as you wish?
You want to add the padding to the navigation to add additional white space next to the logo I guess, so that it looks a little bit more tidied up? If so my suggestions:
Currently your logo is not centered in mobile version. Thats the first point to make a little adjustment:
.logo {
background: url(http://i48.tinypic.com/2mob6nb.png);
background-size: 140px 59px;
width: 140px;
height: 59px;
position: absolute;
top: 2%;
left: 50%; /* center the left side of the logo */
margin-left: -70px; /* go half of the logos width backwards, so that the logos center is centered */
}
Then your <li>s receive the additional padding, but they are centered as text, not as "blocks". You can't the same amount of white space on the left and on the right side. To achieve this the next adjustment would be to add a widthto your <li>s like so:
nav li {
display: inline-block;
padding: 3% 2%;
width: 50px; /* change this to whatever you want in px or % */
}
The difference looks like this (first before, then after):
Does this fix your problem? If not feel free to correct my understanding of your question or let me know, if you need further information.
Best regards,
Marian.