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.
Related
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%;
}
I am making website in html and css and I have a problem. In my css file I made id "full" which set wooden background after sidebar and it should continue on all page. In my class "picture" I made 80% width white panel - so there should be 80% white background in the middle and 10% edges should be wooden. It works correctly untill my article section, where I added some images of pizzeria. Immediately there is no wooden edges, only white. I don´t understand because my "full" id and "picture" class continue untill end of the body. Could somebody see where is error please?
Image showing error
* {
padding: 0;
margin: 0;
border: 0;
}
.container {
margin: auto;
overflow: hidden;
width: 100%;
}
#full {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
.picture {
margin: auto;
width: 80%;
background: white;
}
#pizzaObrazok {
background-image: url("img/pizzaCompleted.png");
width: 100%;
height: 210px;
margin: 0px;
}
nav {
float: left;
margin-left: 2px;
width: 100%;
height: 32px;
}
ul {
float: left
}
li {
display: inline;
border: 4px solid black;
font-size: 24px;
padding: 10px 64px;
background-color: #990000;
color: #ffffff;
}
li a {
color: #ffffff;
text-decoration: none;
padding-top: 8px;
padding-bottom: 5px;
vertical-align: middle;
}
#imgPizza {
width: 59%;
height: 270px;
padding-left: 190px;
padding-top: 30px;
padding-bottom: 30px;
}
article p {
font-size: 120%;
font-family: fantasy;
text-align: center;
margin-right: 160px;
}
#imgPizza2 {
width: 30%;
height: 270px;
position: absolute;
transform: rotate(345deg);
margin-top: 100px;
margin-left: 50px;
border: 6px solid red;
}
#imgPizza3 {
width: 30%;
height: 270px;
position: absolute;
margin-left: 390px;
margin-top: 100px;
transform: rotate(15deg);
border: 6px solid red;
}
#phone {
border: 2px solid black;
margin-top: 150px;
margin-right: 180px;
padding: 5px;
position: absolute;
display: inline;
text-align: center;
background: #ff4d4d;
}
<header>
<div id="pizzaObrazok">
</div>
</header>
<div id="full">
<section id="navigation">
<div class="container">
<nav>
<ul>
<li>ÚVOD</li>
<li>FOTO</li>
<li>JEDÁLNY LÍSTOK</li>
<li>KDE NÁS NÁJDETE</li>
<li>NÁZORY</li>
</ul>
</nav>
</div>
 
</section>
<div class="picture">
<img id="imgPizza" src="img/pizzacheese.jpg">
<aside id="phone">
<h2>Telefónne číslo:</h2>
<h2> 0905 741 963</h2>
</aside>
</div>
 
<div class="picture">
<article>
<p>U nás dostanete najchutnejšiu pizzu z výlučne kvalitných surovín</p>
<img id="imgPizza2" src="https://cdn.vox-cdn.com/uploads/chorus_image/image/50289897/pizzeria_otto.0.0.jpg">
<img id="imgPizza3" src="https://media-cdn.tripadvisor.com/media/photo-s/09/bc/74/79/pizzeria-du-drugstore.jpg">
</article>
</div>
</div>
You have your elements "#imgPizza2" and "#imgPizza3" whit position absolute outside your "#full" wrapper. You can do various things to achive the effect you are looking for but depends of many others things.
I think the simpliest way is to put your background image in to the body and not in the warpper "#full" or change the postion of your images among others.
body {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
It looks like the wood background is 620 x 387, so my first thought is that it is big enough to cover the first section but not the articles. Maybe add background-repeat: repeat-y; to your #full class and see if the wood border spreads further down the page.
I'm struggling with this project I'm doing for practice. I'm having trouble with the innovation cloud project. Please explain me how to fix this.
I can't manage to get the "Learn More" button to be below the paragraph in the header section.
I can't manage to get the image in the main section to float left of the Header and paragraph.
I also can't manage the jumbotron DIV to appear below main. The image fuses with main, it doesn't appear below it where it should be.
Here is the pen for a visual: http://codepen.io/alejoj/pen/xGBbwv
Thanks for your help.
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.container {
margin: 0 auto;
max-width: 940px;
padding: 0 10px;
}
/* Header */
.header {
height: 800px;
text-align: center;
background-image: url('https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg');
background-size: cover;
}
.header .container {
position: relative;
top: 200px;
}
.header h1 {
font-size: 80px;
line-height: 100px;
margin-top: 0;
margin-bottom: 80px;
color: white;
}
#media (min-width:850px) {
.header h1 {
font-size: 120px;
}
}
.header p {
font-weight: 500;
letter-spacing: 8px;
margin-bottom: 40px;
margin-top: 0;
color: white;
}
.btn{
width: 30%;
height: 40px;
border: none;
margin: 25px auto 0 auto;
font-family: 'Roboto', sans-serif;
font-size: 15px;
background-color: black;
color: white;
}
.btn:hover {
background: #117bff;
cursor: pointer;
transition: background .5s;
}
/* Nav */
.nav{
background-color: black;
}
.nav ul {
display: table;
list-style: none;
margin: 0 auto;
padding: 30px 0;
text-align: center;
}
.nav li{
display: cell;
vertical-align: middle;
float: left;
padding-left: 10px;
color: white;
font-family: 'Roboto', sans-serif;
}
/* Main */
.main .container {
margin: 80px auto;
}
.main h2, p{
display: inline-block;
float: left;
}
.main img{
height: 150px;
width: 35%%;
margin: 50px -5px 50px 0px;
display: inline-block;
float: left;
}
/* Jumbotron */
.jumbotron {
margin: 10px 0;
height: 600px;
text-align: right;
background-image:url('https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/jumbotron_bg.jpg');
}
.jumbotron .container {
position: relative;
top: 220px;
}
/* Footer */
.footer {
font-size: 14px;
}
/* Media Queries */
#media (max-width: 500px) {
.header h1 {
font-size: 50px;
line-height: 64px;
}
.clearfix{
clear: both;
}
.main, .jumbotron {
padding: 0 30px;
}
.main img {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="header">
<div class="container">
<h1> INNOVATION CLOUD </h1>
<p>CONNECT YOUR IDEAS GLOBALLY</p>
<input class="btn" type="button" value="Learn More">
</div>
</div>
<div class="nav">
<div class="container">
<ul>
<li>Register</li>
<li>Schedule</li>
<li>Sponsors</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="main">
<div class="container">
<img id="mainImage" src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg" />
<h2>The Innovation Cloud Conference</h2>
<p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
<p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>
<p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
</div>
</div>
<div class="clreafix"></div>
<div class="jumbotron">
<div class="container">
</div>
</div>
</body>
</html>
Not entirely sure about your desired outcome, but it seems that this css was throwing off a lot of what you want to fix:
.main h2, p {
display: inline-block;
float: left;
}
If you remove that and change the right margin on your image from -5 to 50 it looks pretty good like this: http://codepen.io/anon/pen/BNbyEP
Floating elements can really throw off your layout if you don't "clear" the floats. Sometimes I add a br style="clear:both" after floated elements to keep the flow looking as expected (in the case of not seeing your jumbotron image where it should be)
You have your p set to inline-block. Remove this:
.main h2, p {
display: inline-block;
float: left;
}
You have negative right margin on your image. Change this:
margin: 50px -5px 50px 0px;
to:
margin: 50px 50px 50px 0px;
Not sure what you mean.
Can someone take a look at my code please and tell me:
How can I get the image to go over the <header> and <nav> so that everything else centres properly. I have tried playing with z-index and nothing seems to work.
How do I get the <section> to start under the <nav> rather than right at the top of the page behind the other elements without using loads of <br>s?
#CHARSET "ISO-8859-1";
body {
font-family: "Comic Sans MS", cursive, sans-serif
}
header {
background-color: #ffd800;
color: black;
height: 119px;
width: 100%;
margin: -20px -10px;
min-width: 800px;
position: fixed;
margin: -20px -10px;
text-align: center;
}
.logo {
float:left;
width: 118px;
height: 118px;
margin-right: 50px;
}
header h2 {
min-width: 800px;
}
nav ul {
background-color: #ffd800;
text-align:center;
list-style: none;
width: 800px;
margin: 0 auto 0 auto;
}
nav li {
display: inline;
}
nav a {
display: inline-block;
padding: 0 30px;
text-decoration: none;
}
nav a:hover {
color: white;
}
section {
width: 800px;
margin: 0 auto 0 auto;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 0 40px 5px 40px
}
section h3 {
text-align: center;
}
.clear {
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Chris Atkinson</title>
<link rel="stylesheet" type="text/css" href="resources/css/styles.css">
</head>
<body>
<header>
<img class="logo" src="resources/img/chris.gif" alt="logo">
<br>
<h2>Web Design by Chris Atkinson</h2>
<nav>
<ul>
<li>home</li>
<li>projects</li>
<li>blog</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
</header>
<section>
<br>
<br>
<br>
<br>
<h3>Welcome to my site</h3>
<p>Please take a good look around, and send me some feedback in
the 'contact' section. I'd love to hear from you</p>
</section>
</body>
</html>
Change these css properties and you should be able to get rid of all the breaks:
section {
width: 800px;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 100px 40px 5px 40px
}
.logo {
position: absolute;
width: 118px;
height: 118px;
z-index: 20;
}
No need to float left on the logo if you are doing an absolute position. Also, you you want to add top padding (the first value in the padding property) of your section to shift it down below the nav.
http://jsbin.com/woyilesoka/2/edit?html,css,output
You need to break your logo away from your other stuff. Make your logo position: absolute; and create a z-index greater than the divs below it. This way it's above your other divs, and not included in the divs. This will keep the rest of your stuff centered.
Directions:
.logo {
position: absolute;
z-index : 9000;
float:left;
width: 118px;
height: 118px;
}
then move the logo left.
You can make your logo position absolute so that the float of other elements do not interfere with your logo:
.logo {
position: absolute;
width: 118px;
height: 118px;
margin-right: 50px;
}
This is how your make your section below the nav bar by changing margin on the top of the section:
section {
margin: 2opx auto 0 auto;
width: 800px;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 0 40px 5px 40px;
}
I created a feature box on my WordPress development site. With some help I made the feature box responsive and it's almost finished. You can see this feature box displaying properly in the below screenshot
However, I have two issues:
1) When I reduce my browser window in size, the navbar turns expands onto two lines and covers my feature box (pictured). I want the feature box to move down as the navbar expands.
2) On my phone the red ribbon in my feature box expands beyond the width of the page and causes the navbar to display incorrectly (pictured). I don't want the red ribbon to expand beyond the width of my navbar.
I created the navbar using CSS and an image. Using CSS, I created a large red rectangle that expands beyond the margin of my feature box. I then used an image of a red triangle and positioned this beneath the red rectangle. You can see how I did this by looking at "#text-4" in my CSS.
My relevant CSS is
.featured-box {
border-radius: 20px;
background-color: #000;
color: #fff;
padding: 20px;
margin: 0 auto;
margin-top: 10px;
overflow: visible;
width: auto;
max-width: 1160px;
}
.featured-box h4 {
font-size: 20px;
color: #fff;
}
.myimage {
float:right;
}
.featured-box p {
padding: 0 0 20px;
}
.featured-box ul {
margin: 0 0 20px;
}
.featured-box ul li {
list-style-type: disc;
margin: 0 0 0 30px;
padding: 0;
align: right;
}
.featured-box .enews p {
padding: 10 10 10 10px;
color: #fff;
float: left;
width: 220 px;
margin: 10 10 10 10px;
}
.featured-box .enews #subscribe {
padding: 20 20 20 20px;;
}
.featured-box .enews #subbox {
background-color: #fff;
margin: 0;
width: 300px;
}
.featured-box .enews .myimage {
float: right;
margin-left: 10px;
margin-right: 50px;
width: auto;
}
section.enews-widget {
overflow: hidden;
}
.featured-box .enews input[type="submit"] {
background-color: #d60000;
padding: 10 10 10 10px;
width: 150px;
}
#media screen and (min-width: 1140px) {
div.featured-box {
margin-top: 10%;
}
}
#media only screen and (max-width: 767px) {
section.enews-widget {
clear: both;
}
.myimage {
float: none;
}
.myimage img {
display: block;
height: auto;
margin: 0 auto;
}
}
#text-4 > div:nth-child(1) > h4:nth-child(1) {
color: #fff;
font-size: 1.3em; font-weight: normal;
text-transform: uppercase;
background-color: #d60000;
position: relative;
margin: 0px -60px 20px -20px;
padding: 18px 0px 16px 20px;
}
#text-4 > div:nth-child(1) > h4:nth-child(1):after {
content: '';
display: block; height: 40px; width: 40px;
background: url(http://bryancollins.eu/wp/wp-content/uploads/2014/04/fold.png) no-repeat 0 0;
position: absolute; right: 0px; bottom: -40px;
}
.page p { line-height: 1.2em; }
.page a { color: #1badd2; text-decoration: none; }
.widget li {
margin: 0;
padding: 2px 0px 8px 35px;
display: inline; position: relative;
border-bottom: none;
}
.featured-box .widget li {
list-style: none;
background: url("http://bryancollins.eu/wp/wp-content/uploads/2014/04/arrow.png") no-repeat scroll 0 10px rgba(0, 0, 0, 0);
display: inline;
margin: 0 0 0 30px;
padding: 0 0 0 40px;
}
My HTML:
<div class="featured-box widget-area">
<section id="text-4" class="widget widget_text">
<div class="widget-wrap">
<h4 class="widget-title widgettitle">
Get this for free
</h4>
<div class="textwidget">
<div class="myimage">
<img src="http://bryancollins.eu/wp/wp-content/uploads/2014/04/Book-cover.png"></img>
</div>
</div>
</div>
</section>
<section id="enews-ext-3" class="widget enews-widget">
<div class="widget-wrap">
<div class="enews">
<h4 class="widget-title widgettitle">
33 Creative Strategies for your next writing proje…
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing…
</p>
<div class="arrows">
<ul>
<li>
List item 1
</li>
<li>
List item 2
</li>
<li>
List item 3
</li>
</ul>
</div>
<p>
Tuo vero id quidem, inquam, arbitratu. Illud mihi …
</p>
<form id="subscribe" name="33 Creative Strategies for your next writing project" onsubmit="if ( subbox1.value == 'First Name') { subbox1.value = ''; } if ( subbox2.value == 'Last Name') { subbox2.value = ''; }" target="_blank" method="post" action="<!-- Begin MailChimp Signup Form --> <div id="mc_embed_signu…s="button"></div> </form> </div> <!--End mc_embed_signup-->"></form>
</div>
</div>
</section>
Thanks for the help.
Fix for 1.) Needed to increase top margin between 1024px and 1140px can be more or less than 14% but looks ok at 14!
#media screen and (min-width: 1024px) and (max-width: 1140px) {
div.featured-box {
margin-top: 14%;
}
}
User fixed with margin-top 130px.
Fix for 2.)
Try adding 'overflow: hidden' to the same media query:
#media screen and (min-width: 1024px) {
div.featured-box {
margin-top: 130px;
overflow: hidden;
}
}
For your first issue, on "desktop size" your featured box has a margin-top of 10%, but then once you resize below 1040px, the featured box takes on the default CSS which has a margin-top of 10px and the navigation has fixed positioning meaning that the featured box margin top is from the top of the window, not from below the navigation.
To resolve this, you can change the default CSS to use a percentage for the top margin, however I would advise using relative positioning and using pixels to set the margin. Another option is to increase the breakpoint so that the "mobile" navigation replaces the default navigation as soon as it beings to wrap.
For your second issue you can either set "overflow:hidden;" on the containing div or you can set the maximum scale to 1 with a viewport meta tag(mobile), I'd advise doing both:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">