I have been developing a personal portfolio website on my Mac, but unfortunately it is not rendering correctly on any browser run on Windows OS. It works as intentioned on mobile and MacOS. The website is aaronalberg.com. On Windows, the cards under "Projects" and the footer both overlap on the sidebar. Additionally, when the window gets to about 800px wide or smaller when the sidebar is changed for the header, the #leftheader and #rightheader sections stack (and as a result the rightheader is not shown) despite them having a total width of 50vw each (which should add up to 100 as it does on Mac).
I have tried using a CSS wipe template which did not work and any specific pixel or viewport changes I make to accommodate the Windows differences mess up the layout on other operating systems. Some hopefully relevant html/css is below
Any help is much appreciated. Thank you!
:root {
--main-theme: #5AF;
--sidenav-length: 250px;
}
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
body {
background-color: white;
width: 100%;
position: relative;
font-family: sans-serif;
text-align: center;
margin: 0;
padding-bottom: 10vh;
overflow-x: hidden;
}
header {
padding-top: 5px;
display: none;
background-color: var(--main-theme);
color: white;
height: 150px;
}
#headertext {
text-align: left;
padding-right: 2%;
padding-left: 2%;
font-size: 3em;
}
#leftheader {
float: left;
margin-left: 1vw;
margin-top: 2vh;
width: 49vw;
}
#rightheader {
font-size: 1.2em;
float: left;
text-align: center;
width: 50vw;
margin-top: 5vh;
}
#rightheader p {
display: inline;
}
#rightheader div {
padding-bottom: 5%;
}
header i {
color: white;
display: inline;
font-size: 1.5em;
}
/* side nav */
.sidenav {
height: 100%;
width: var(--sidenav-length);
position: fixed;
z-index: 2;
top: 0;
left: 0;
background-color: var(--main-theme);
overflow-x: hidden;
padding-top: 20px;
color: white;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: white;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav i {
display: inherit;
}
#wrapper {
width: 100%;
margin: 0;
text-align: center;
padding-bottom: 100px;
}
#outerwrapper {
margin:0;
width: calc(100vw - var(--sidenav-length));
position: absolute;
z-index: 2;
right:0;
}
/* project chunks */
.projectcard {
background-color: #e8e8e8;
padding: 1%;
padding-top: 2%;
height: 220px;
}
.projectcard:nth-child(2n) {
background-color: #d8d8d8;
}
.projectpic {
clear: both;
width: 180px;
margin-right: 2%;
float: left;
margin-left: 5px;
}
.projecttitle {
text-align: left;
}
#projectlabel {
margin-left: 50px;
}
.projecttext {
text-align: left;
}
.projecttext a {
color: blue;
text-decoration: none;
}
#projects {
padding-bottom: 50px;
}
<body>
<header>
<div id="leftheader">
<h1 id="headertext">Aaron Alberg</h1>
<p>Engineer. Leader. Innovator.</p>
</div>
<div id="rightheader">
<div>
</div>
<div style="line-height: 1.4;">
<span class="icon">
<i style="display: inline;" class="fas fa-map-marker-alt"></i>
</span>
<p> Chicago, IL & Champaign, IL</p>
</div>
</div>
</header>
<div class="sidenav">
<img src="files/profilepic.jpg" alt="profile picture" class="profile">
<h1>Aaron Alberg</h1>
<p>Engineer. Leader. Innovator.</p>
<i class="fas fa-map-marker-alt"></i>
<p>Chicago, IL</p>
<p>Champaign, IL</p>
</div>
<div id="outerwrapper">
<div id="wrapper" class="center">
<div id="bio">
<h2>Hello!</h2>
<p class="profiletext">My name is Aaron Alberg. I'm currently studying <b class="blue">computer science</b> at the University of Illinois at Urbana-Champaign. I'm passionate about applying <b class="blue">human-centered design principles</b> to projects ranging from software development to community outreach. I believe the key to engineering the best solutions is a <b class="blue">deep understanding of user needs</b>. Take a look at my resume.</p>
</div>
<h2 id="projectlabel">Projects</h2>
<div id="projects">
<div class="projectcard">
<img src="files/UPDmural.png" alt="UPD mural" class="projectpic">
<h3 class="projecttitle">Urbana Park District <span class="inprogress">(in progress)</span></h3>
<p class="projecttext">As a part of UIUC's chapter of Design for America, my team is collaborating with the Urbana Park District to fine tune the implementation of UPD's new Strategic Plan. Specifically, we are working to find ways to promote a culture of diversity and inclusion that the staff are accountable for creating and upholding. </p>
Read More
</div>
<div class="projectcard">
<img src="files/websitepic.png" alt="picture of website" class="projectpic">
<h3 class="projecttitle">This Website <span class="inprogress">(in progress)</span></h3>
<p class="projecttext">Since doing a project is way more fun than following an online tutorial, I've used the development of this website to teach myself HTML/CSS. I also work to ensure that the site is scalable for future editing, accessible, and functions on all screen sizes. When I come across a feauture I like, I learn how to use it by implementing it here.</p>
Read More
</div>
</div>
<div id="inprogress">
<p class="center">**This website is very much a work in progress and is currently experiencing rendering issues specifically on Windows OS. Stay tuned!**</p>
</div>
</div>
<footer>
<p class="center foottext">
<i class="fas fa-envelope"></i> <span class="nearicon">aaronjalberg#gmail.com</span> <span class="pipe">|</span>
</i> <span class="nearicon">linkedin.com/in/aaron-alberg</span> <span class="pipe">|</span>
<i class="fab fa-github"></i> <span class="nearicon">github.com/aaronalberg</span>
</p>
<p class="center">© Aaron Alberg 2019</p>
</footer>
</div>
</body>
To fix the overlap issues on small viewport. You should change your CSS of #outerwrapper a bit like this:
From:
#outerwrapper {
width: calc(100vw - var(--sidenav-length))
}
to:
#outerwrapper {
width: calc(100% - var(--sidenav-length))
}
The other issues you described is not clear. Please write down your expected result. Because for me when resizing the viewport, stacking is a normal behavior.
Related
I am making a website and I have chosen to use smooth scroll.
The smooth scrolling effect works, but if (for example) i chose to scroll down to the 'timeline' section, and then scroll back to 'home', it just stops scrolling midway through the home section. Why is this? Below you can see my webiste.
For example I have set this div as section1 (home):
<div id='section1' class="home-info">
Therefore, i thought that smoothscroll would take me to the top of that div. Turns out it only scrolls through half of it. Why is that???
*{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
html {
scroll-behavior: smooth;
}
a {
color: #AEC6CF;
underline: black;
}
.header{
height: 100px;
background: #f1f1f1;
padding: 0 20px;
color: #000000;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
}
.logo{
line-height: 100px;
float: left;
position: fixed;
top: 0;
z-index: 1030;
}
.menu{
float: right;
line-height: 100px;
position: fixed;
right: 0;
top: 0;
z-index: 1030;
font-size: 20px;
}
.menu a{
color: #000000;
text-decoration: none;
padding: 0 10px;
transition: 0.4s;
}
.show-menu-btn,.hide-menu-btn{
transition: 0.4s;
font-size: 30px;
cursor: pointer;
display: none;
}
.show-menu-btn{
float: right;
}
.show-menu-btn i{
line-height: 100px;
}
.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
color: #AEC6CF;
}
a:link, i {
color: black;
}
i:hover {
color: #AEC6CF;
transition: 0.4s;
cursor: pointer;
}
#chk{
position: absolute;
visibility: hidden;
z-index: -1111;
}
.footer {
left: 0;
bottom: 0;
width: 100%;
background-color: #f1f1f1;
color: black;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
}
#media screen and (max-width:800px) {
.show-menu-btn,.hide-menu-btn{
display: block;
}
.menu{
position: fixed;
width: 100%;
height: 100vh;
background: #f1f1f1;
right: -100%;
top: 0;
text-align: center;
padding: 80px 0;
line-height: normal;
transition: 0.7s;
}
.menu a{
display: block;
padding: 20px;
}
.hide-menu-btn{
position: absolute;
top: 40px;
right: 40px;
}
#chk:checked ~ .menu{
right: 0;
}
.footer {
left: 0;
bottom: 0;
width: 100%;
background-color: #f1f1f1;
color: black;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 10px;
padding-right: 10px;
}
.header {
height: 103.5px;
}
.header-info h2 {
font-size: 20px;
margin-top: 350px;
}
.header-info h1 {
font-size: 30px;
}
}
* {
box-sizing: border-box;
}
body {
background-color: #fff;
font-family: Helvetica, sans-serif;
}
/* The actual timeline (the vertical ruler) */
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
/* The actual timeline (the vertical ruler) */
.timeline::after {
content: '';
position: absolute;
width: 4px;
background-color: black;
top: 0;
bottom: 0;
left: 50%;
margin-left: -1.2px;
}
/* Container around content */
.container {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
.header-container {
width: 100%;
position: relative;
background-color: inherit;
padding: 10px 40px;
}
/* The circles on the timeline */
.container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: white;
border: 4px solid #AEC6CF;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* Place the container to the left */
.left {
left: 0;
}
/* Place the container to the right */
.right {
left: 50%;
}
/* Add arrows to the left container (pointing right) */
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
/* Add arrows to the right container (pointing left) */
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Fix the circle for containers on the right side */
.right::after {
left: -16px;
}
/* The actual content */
.content {
padding: 20px 30px;
background-color: #f1f1f1;
position: relative;
border-radius: 6px;
transition: 0.4s;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
#media screen and (max-width: 600px) {
/* Place the timelime to the left */
.timeline::after {
left: 31px;
}
/* Full-width containers */
.container {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Full-width containers */
.header-container {
width: 100%;
padding-left: 25px;
padding-right: 25px;
}
/* Make sure that all arrows are pointing leftwards */
.container::before {
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Make sure all circles are at the same spot */
.left::after, .right::after {
left: 15px;
}
/* Make all right containers behave like the left ones */
.right {
left: 0%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='style.css'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<title>lunAr-creator</title>
<div class="header" id='pronav'>
<div class='logo' id='logo'>
<h1>lunAr-creator</h1>
</div>
<input type="checkbox" id="chk">
<label for="chk" class="show-menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul class="menu" id='navbar'>
Home
About
Timeline
Projects
Useful Links
<label for="chk" class="hide-menu-btn">
<i class="fas fa-times"></i>
</label>
</ul>
</div>
<div style="margin-top:120px">
<div id='section1' class="home-info">
<h2 style='text-align:center;margin-top:350px;font-size:28px;'>Hi there. I'm lunAr-creator!</h2>
<h1 style='text-align:center;padding-top:20px;font-size:40px;love {color:#AEC6CF}'>& I love programming</h1>
<h3 style='text-align:center;padding-top:30px;padding-bottom:480px;'>Projects<i class="fas fa-chevron-down" style='margin-left:20px;'></i></h3>
</div>
<div class='header-container'>
<div id="section3" class="content">
<h2>About<i style='margin-left:20px;color:#AEC6CF;cursor:default;' class="fas fa-address-card"></i></h2>
<p>This is where i will talk about who I am and what i do :D</p>
</div>
</div>
<div class='header-container'>
<div class="content">
<h2>Timeline<i style='margin-left:20px;color:#AEC6CF;cursor:default;padding-bottom:0px;' class="fas fa-child"></i></h2>
<p>The stages I have been through so far with programming.</p>
</div>
</div>
<br></br>
<div class="timeline">
<div class="container right">
<div class="content">
<h2>2016 - 17</h2>
<p>I joined a Scratch coding camp where I learnt some of the foundations of programming.</p>
<br></br>
<p>My Dad built on the knowledge I had already aquired from the course and used C# to teach us some new concepts.</p>
</div>
</div>
<div class="container left">
<div class="content">
<h2>2018-19</h2>
<p>My school introduced me to HTML and CSS where i made my first website - a Minecraft handbook. I started learning Python aswell after it being recommended to me.</p>
<p>Watched a couple of Youtube tutorials on Python, started applying them to small programs and building up my skills.</p>
<br></br>
<p>Made my first (text-based) game called '9-lives'. Used the book: 'Python in easy steps' to help me understand the logic behind it.</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>2020</h2>
<p>Had lots of spare time on my hands due to Covid. Made some projects such as pong, a simple email client using smtplib, tkinter for the UI and made my second website.</p>
<br></br>
<p>Developed and hosted (and is still hosting) a website for a youth group. I used HTML, CSS and a little Javascript to accomplish this.</p>
<a style='color: #AEC6CF' href="https://a-town-youth.netlify.app">Click here to visit the youth group website</a>
</div>
</div>
<div class="container left">
<div class="content">
<h2>2021</h2>
<p>Created a text-based adventure rpg game for beginners to contribute to (including me). In my opinion it improved my team-working/collaboration skills and helped me learn some new concepts looking at other people code.</p>
<br></br>
<p>Joined GitHub :D </p>
<a style='color: #AEC6CF' href="https://github.com/lunAr-creator">Click here to visit my GitHub</a>
<br></br>
<p>Made my first library (pw-gen) for generating strong randomised passwords.</p>
</div>
</div>
</div>
<br></br>
<div id='section4' class='header-container'>
<div class="content">
<h2>Projects<i style='margin-left:20px;color:#AEC6CF;cursor:default;' class="fas fa-code-branch"></i></h2>
<p>All of my projects are up on my GitHub profile so be sure to check them out</p>
</div>
</div>
<div id='section5' class='header-container'>
<div class="content">
<h2>Useful Links<i style='margin-left:20px;color:#AEC6CF;cursor:default;' class="fas fa-link"></i></h2>
<p>Links to websites and resources that I find helpful whilst I am programming</p>
</div>
</div>
<div id='section6' class='header-container'>
<div class="content">
<h2>Contact<i style='margin-left:20px;color:#AEC6CF;cursor:default;' class="fas fa-pen"></i></h2>
<p>Contact me here for information or collaboration requests</p>
</div>
</div>
<div class='footer'>
<i class="fab fa-github" style='font-size:30px;margin-right:20px;'></i>
<i class="fab fa-stack-overflow" style='font-size:30px'></i>
<br></br>
<p>Copyright © 2021 lunAr-creator - Website Design by me (who else? :D)</p>
</div>
</div>
</body>
</html>
Currently putting CSS touches on a landing page. How do I get my p elements to align underneath my h2 elements? Like how I'd like it to look like:
Here’s what mine looks like:
And here’s the link to the CodePen.
Thanks in advance.
* {
font-family: Arial;
}
#media (max-width: 768px) {
* {
font-family: Tahoma;}
}
#header {
position: fixed;
width: 100%;
display: flex;
top: 0;
background-color: white;
opacity: 0.8;
}
#header img {
height: 75px;
width: 75px;
margin-top: -10px;
}
#header h1 {
font-size: 23px;
margin-left: -20px;
}
#header nav {
margin-left: 730px;
margin-top: 15px;
}
#header a {
color: black;
text-decoration: none;
}
.nav-link {
margin-right: 10px;
}
#glove {
margin-top: 100px;
margin-left: 50px;
}
.glove-feature {
display: flex;
flex-direction: row;
}
.glove-feature img {
height: 100px;
width; 100px;
}
.description {
padding: 5px;
margin-top: -10px;
margin-bottom: 15px;
}
#features {
margin-top: 50px;
}
#features h2 {
text-align: center;
}
#features iframe{
display: block;
margin: 0 auto;
}
#pricing {
margin-top: 100px;
text-align: center;
border: 1px dashed black;
width: 50%;
margin-left: auto;
margin-right: auto;
display: block;
}
#pricing h3 {
font-weight: normal;
}
#pricing p {
font-style: italic;
}
#close {
margin-top: 50px;
text-align: center;
font-size: 20px;
}
input[type=submit] {
background-color: #DBBC58;
border-radius: 6px;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<div id=header>
<img src="http://www.free-icons-download.net/images/lightning-bolt-logo-icon-76715.png" alt="Lightning" id="header-img">
<h1>Lightning-Fast Muay Thai Gloves</h1>
<nav id="nav-bar">
Why this glove?
Features
Pricing
</nav>
</div>
<div id="glove">
<div id="leather" class="glove-feature">
<img src="https://png.icons8.com/ios/1600/leather-filled.png" alt="leather" id="leather-img">
<div class="description">
<h2>Authentic Leather</h2>
<p>Leather that won't crack and endure even the harshest blows. Straight from Phuket province.</p>
</div>
</div>
<div id="science" class="glove-feature">
<img src="https://cdn3.iconfinder.com/data/icons/pixomania/128/science-512.png" alt="science" id="science-img">
<div class="description">
<h2>Aerodynamically Tested</h2>
<p>Gloves that have been tested time and time again to ensure the fastest strike. Testers may have been injured in the process.</p>
</div>
</div>
<div id="sewing" class="glove-feature">
<img src="https://cdn2.iconfinder.com/data/icons/eldorado-appliance/40/sewing_machine-512.png" alt="sewing" id="sewing-img">
<div class="description">
<h2>Hand-made</h2>
<p>Each and every glove is made in our Bangkok factory from scratch. That's the only way to make sure we deliver what we promise.</p>
</div>
</div>
</div>
<div id="features">
<h2>In-Depth Look</h2>
<iframe id="video" width="600" height="400" src="https://www.youtube.com/embed/xo2xuNYKO0I" frameborder="0" allowfullscreen></iframe>
</div>
<div id="pricing">
<h2>Pricing</h2>
<h3>$49.99</h3>
<p>And if it doesn't last you 36 months...we'll give you a full refund.</p>
</div>
<div id="close">
<form id="form" action="https://www.freecodecamp.com/email-submit">
Take your bouts to the next level: <br>
<input id="email" type="email" placeholder="Email" name="email"><br>
<input id="submit" type="submit">
</form>
</div>
You needed an extra div around your h2s and ps to format them correctly inside of a flex parent. I simplified your CSS and HTML to the minimal correct example, also choosing to use classes instead of IDs for CSS selectors to remove duplicate styles:
* {
font-family: Arial;
}
.glove-feature {
display: flex;
flex-direction: row;
}
.glove-feature img {
height: 150px;
width: 150px;
}
.description {
padding: 10px;
}
<div id="glove">
<div id="leather" class="glove-feature">
<img src="https://png.icons8.com/ios/1600/leather-filled.png" alt="leather" id="leather-img">
<div class="description">
<h2>Authentic Leather</h2>
<p>Leather that won't crack and endure even the harshest blows. Straight from Phuket province.</p>
</div>
</div>
<div id="science" class="glove-feature">
<img src="https://cdn3.iconfinder.com/data/icons/pixomania/128/science-512.png" alt="science" id="science-img">
<div class="description">
<h2>Aerodynamically Tested</h2>
<p>Gloves that have been tested time and time again to ensure the fastest strike. Testers may have been injured in the process.</p>
</div>
</div>
<div id="sewing" class="glove-feature">
<img src="https://cdn2.iconfinder.com/data/icons/eldorado-appliance/40/sewing_machine-512.png" alt="sewing" id="sewing-img">
<div class="description">
<h2>Hand-made</h2>
<p>Each and every glove is made in our Bangkok factory from scratch. That's the only way to make sure we deliver what we promise.</p>
</div>
</div>
body {
background: #911f3c
}
.content-title {
font-family: teko;
color: white;
text-align: center;
font-size: 40px;
padding-top: 80px;
padding-bottom: 50px;
letter-spacing: 2px;
text-transform: uppercase;
}
.container {
font-family: teko;
color: white;
font-size: 30px;
line-height: 35px;
padding-bottom: 50px;
padding-left: 20px;
padding-right: 20px;
}
.column-left {
float: right;
padding-left: 30px;
width: 30%;
}
.column-right {
float: right;
width: 33%;
}
.column-center {
display: inline-block;
width: 33%;
}
<h3 class="content-title">
Explore - Discover - Enjoy
</h3>
<div class="container">
<div class="column-center">Explore the limitless archive of the worlds highest quality cinematic sports videos </div>
<div class="column-left">Enjoy the vast selection of videos and learn the stories behind the creation of the art</div>
<div class="column-right">Discover your favourite film makers, content creators and athletes within the industry</div>
</div>
I am creating a quick project for uni and i am struggling on this one little aspect. I really want to add 3 separate, relatively small, rounded images below the 3 word title but above each column (see the attached image). But every time I do it all the text moves around and it just being a massive pain.
How can I get this working?
Assuming you're not using any framework like bootstrap, this should do the trick:
body {
background: #911f3c
}
.content-title {
font-family: teko;
color: white;
text-align: center;
font-size: 40px;
padding-top: 80px;
padding-bottom: 50px;
letter-spacing: 2px;
text-transform: uppercase;
}
.col-container {
margin-left: 20px;
margin-right: 20px;
}
.col {
float: left;
width: 33.3333%;
}
.col-content {
margin-bottom: 30px;
padding-left: 15px;
padding-right: 15px;
text-align: center;
}
.col-content img {
display: inline-block;
vertical-align: middle;
}
.col-content p {
font-family: teko;
color: white;
font-size: 30px;
line-height: 35px;
text-align: justify;
}
<h3 class="content-title">
Explore - Discover - Enjoy
</h3>
<div class="col-container">
<div class="col">
<div class="col-content">
<img src="https://dummyimage.com/100/">
<p>
Explore the limitless archive of the worlds highest quality cinematic sports videos
</p>
</div>
</div>
<div class="col">
<div class="col-content">
<img src="https://dummyimage.com/100/">
<p>
Discover your favourite film makers, content creators and athletes within the industry
</p>
</div>
</div>
<div class="col">
<div class="col-content">
<img src="https://dummyimage.com/100/">
<p>
Enjoy the vast selection of videos and learn the stories behind the creation of the art
</p>
</div>
</div>
</div>
I hope this helps :)
I'm creating a style sheet for use on mobiles and the text needs to be condensed down into one column, rather that the two that are displayed side by side on a desktop.
I'm wondering whether my issue has anything to doing the positioning that I have applied to the divs?
Please see this fiddle http://jsfiddle.net/vtdo8vc0/
#col1 {
position: relative;
display: inline;
float: left;
width: 94%;
padding-right: 3%;
padding-left: 3%;
}
#col2 {
position: relative;
display: inline;
float: left;
width: 94%;
padding-right: 3%;
padding-left: 3%;
}
.col {
font-family: 'Avenir-Book';
font-size: 12px;
line-height: 16px;
font-weight: 500;
}
#main_content {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
#main_content img {
width: 100%;
height: auto;
padding-bottom: 30px;
}
#header {
position: relative;
padding-top: 3%;
padding-left: 3%;
padding-right: 3%;
padding-bottom: 3%;
}
.header {
font-family: 'Avenir-Book';
font-size: 26px;
line-height: 26px;
text-transform: uppercase;
font-weight: 900;
}
<div id="container">
<div id="header">
<div class="header">
food
</div>
</div>
<div id="col1">
<div class="col">
At Danny’s we believe food is very important! Kevin our Head Chef has a wealth of experience and a passion to rival that experience. Wherever possible our food is created using the very best locally sourced ingredients. Whether you are
</div>
</div>
<div id="col2">
<div class="col">
popping in for a lunchtime wrap or a full blown Danny's Burger you can expect the same level of service and attention to detail.
<br>
<br>Check out our menu below.
</div>
</div>
<div id="main_content">
<img src="http://placehold.it/350x150" />
</div>
</div>
If I understand correctly, you want the two columns to behave like they're ons wall of text, at least on narrower screens. Then the solution would be to make #col1, #col2 and .col inline and dispense with the floats.
#col1,
#col2 {
position: relative;
display: inline;
}
.col {
display: inline;
font: 500 12px/16px'Avenir-Book', sans-serif;
}
#main_content {
padding: 0 10px 10px 10px;
}
#main_content img {
width: 100%;
height: auto;
padding-bottom: 30px;
}
#header {
position: relative;
padding: 3%;
}
.header {
font: 900 26px/26px'Avenir-Book', sans-serif;
text-transform: uppercase;
}
#media all and (min-width: 50em) {
/* change into 2 columns on wider screens */
#col1,
#col2 {
display: block;
float: left;
width: 47%;
padding: 0 3%;
box-sizing: border-box;
}
}
<div id="container">
<div id="header">
<div class="header">
food
</div>
</div>
<div id="col1">
<div class="col">
At Danny’s we believe food is very important! Kevin our Head Chef has a wealth of experience and a passion to rival that experience. Wherever possible our food is created using the very best locally sourced ingredients. Whether you are
</div>
</div>
<div id="col2">
<div class="col">
popping in for a lunchtime wrap or a full blown Danny's Burger you can expect the same level of service and attention to detail.
<br>
<br>Check out our menu below.
</div>
</div>
<div id="main_content">
<img src="http://placehold.it/350x150" />
</div>
</div>
I realise this question has been asked before but none of the solutions i have read through have given me a fix.
Basically i have 4 responsives boxes within a div and as i move down the screen sizes the css first-child and nth-child selectors wont work EVEN though i have used the exact same code for another set of boxes below this set and this works perfectly??
As you will see the bottom 2 boxes act as normal but the top two boxes are stuck together even though the css for the margins have been set to prevent this. It's possibly an easy fix but after banging my head off this all last night I feel like giving up.
Any help would really be appreciated, thanks!
HERE is a fiddle showing exactly what is going on: http://jsfiddle.net/f284xyjh/
Here is the HTML code:
<section id="content">
<div class="container">
<div id="about">
<h1><a name="about">WE'RE GOOD... JUST ASK OUR CLIENTS!</a></h1>
<div id="about-text">
<p>Above The Fold is a Dublin based creative, digital marketing agency that provides a personal, professional and passionate service tailored specifically to each of our clients no matter the size. We specialise in creative digital solutions centred around the user and aim to provide a rich user experience for people interacting with your brand online. Blending creativity with technical know-how and research we can brand, plan, design and build your websites and online campaigns<p>
</div><!-- end of about-text -->
</div><!-- End of about -->
<div id="services">
<a name="services"></a>
<div class="service">
<div class="service-info">
<img src="images/creative-design.png" alt="Creative Design icon" />
<h3>Creative Design</h3>
<p>Creativity is at the heart of what we do. Combining creative thinking with technology to deliver beautiful websites that stand out and engage your target audience.</p>
</div>
<div class="find-out-more">FIND OUT MORE</div>
</div>
<div class="service">
<div class="service-info">
<img src="images/branding-icon.png" alt="Branding icon" />
<h3>Branding</h3>
<p>Much more then simply the design of a website. Through strategic planning and research we create dynamic brand icons (logos) that define who you are.</p>
</div>
<div class="find-out-more">FIND OUT MORE</div>
</div>
<div class="service">
<div class="service-info">
<img src="images/strategy.png" alt="Social Media Marketing icon" />
<h3>Social Media Strategy</h3>
<p>Social media marketing gives you an opportunity to expose your brand to a wider audience. All our campaigns are strategically planned to maximise your reach. </p>
</div>
<div class="find-out-more">FIND OUT MORE</div>
</div>
<div class="service">
<div class="service-info">
<a href="#"><img src="images/digital-marketing.png" alt="Digital Marketing icon" />
<h3>Digital Marketing</h3></a>
<p>Your business is unique so you need an online strategy that is designed for you. We deliver research driven results that create awarenss of your brand or services</p>
</div>
<div class="find-out-more">FIND OUT MORE</div>
</div>
</div><!-- end of services -->
</div><!-- End of content container -->
</section><!-- end of top-content section -->
And here's the CSS code:
.container {
width: 1160px;
margin: 0 auto;
overflow: hidden;
}
#content {
height: 605px;
background: #F3F3F2;
margin-top: 1px;
padding-top: 25px;
}
#about {
width: 100%;
display: inline-block;
text-align: center;
}
#about p {
font-family: "Proxima Light",Arial,helvetica,garuda,sans-serif;
font-size: 24px;
line-height: 28px;
margin-bottom: 10px;
}
#about-img {
background: url(../img/about-img.png) no-repeat;
width: 370px;
height: 154px;
float: left;
margin-right: 20px
}
#about-text {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333;
line-height: 23px;
}
#services {
width: 100%;
display: inline-block;
}
#services h3 {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
color: #FFF;
}
#services p {
font-size: 16px;
line-height: 20px;
color: #FFF;
}
#services a {
text-decoration: none;
}
.service {
background: #3498db; url(../images/service-find-out-triangle.png) no-repeat center 256px;
width: 275px;
height: 295px;
float: left;
margin: 20px 20px 20px 0;
text-align: center;
position: relative;
}
.service:last-child {
margin-right: 0;
}
.service-info {
background: #3498db;
width: 255px;
height: 245px;
padding: 20px 10px 0;
}
.service img {
margin-bottom: 10px;
}
#media only screen and (max-width : 1224px) {
.container {
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
#content { height: auto;}
.service { width: 490px; margin: 20px 20px 20px 0;}
.service:first-child { margin-right: 0!important;}
.service:nth-child(2) { margin-right: 0!important;}
.service-info { width: 465px; }
}
#media only screen and (max-width : 1024px) {
.container { width: 800px;}
.service { width: 390px;}
.service-info { width: 370px; }
}
#media only screen and (max-width : 824px) {
.container { width: 680px;}
.service { width: 330px;}
.service-info { width: 310px;}
}
#media only screen and (max-width : 768px) {
.container { width: 95%;}
.service { width: 100%; margin: 20px 0;}
.service-info { width: 94%; }
}
}
This selector: .service:nth-child(2) { margin-right: 0!important;} isn't working because the element you are trying to select is not the 2nd child.
Also...by the way, neither is this one: .service:first-child { margin-right: 0!important;}.
The first-child is the anchor tag
<a name="services"></a>
Accordingly, you should use
.service:nth-child(3) { margin-right: 0!important;}
instead...in this specific instance.
JSfiddle Demo