I'm creating a simple website and the text in one of my heading elements is being hidden/cutoff when viewed on certain mobile devices. This happens when viewed both in Chrome developer tools simulating a mobile device (Galaxy S5) and when viewed in an actual mobile device (Galaxy S5) in chrome. I could not replicate the problem when viewing with the standard browser of an iPhone 6. I've adjusted the CSS to no avail.
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Concierge</title>
<link rel="icon" href="images/favicon.ico" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="build/styles/home.css" />
</head>
<body>
<div class="wrapper">
<nav class="flex-nav">
<a class="toggleNav">☰ Menu</a>
<ul>
<li><a>Multifaceted Approach</a></li>
<li><a>Guest Version</a></li>
<li><a>Administrator Version</a></li>
<li class="social">
<i class="fa fa-twitter"></i>
</li>
<li class="social">
<i class="fa fa-facebook"></i>
</li>
</ul>
</nav>
<section class="introduction">
<h1>Concierge</h1>
<h3>Give Your Guests The Ultimate Experience</h3>
<img src="images/introduction.png">
</section>
<section class="ourMission">
<h2>Our Mission</h2>
<p>People are demanding more and more when it comes to technology. Guests in the hospitality industry are no different.
We designed Concierge to give hotels, bed & breakfasts, and resorts a way to interact with their guests in a way
that suits their needs of the new digital age.Concierge consists of a 'Guest' and 'Administrator' version. Each application
is different, but works with the other to enhance your guests' stay and increase your organization's efficiency.
</p>
</section>
<section class="communication">
<h2>Communication</h2>
<h3>Real-time two-way communication is the heart of what makes Concierge a true asset to your organization</h3>
<img src="images/communication.png" alt="">
</section>
<section class="guestFeatures">
<h2>Guest Features</h2>
<div class="sideBySideImage">
<h3>Concierge includes all of the standard features of a traditional alarm-clock radio</h3>
<img src="images/guestFeaturesAlarm.png" alt="">
<img src="images/guestFeaturesMain.png" alt="">
</div>
<div class="sideBySideImage">
<h3>Allow your guests to search for local attractions and stay on top of the most recent news headlines</h3>
<img src="images/guestFeaturesYelp.png" alt="">
<img src="images/guestFeaturesNews.png" alt="">
</div>
</section>
<section class="administratorFeatures">
<h2>Administrator Features</h2>
<img src="images/administratorFeatures.png" alt="">
</section>
<section class="signup">
<h2>Request Free Demo Access</h2>
<form method="POST" action="/demo/organization" class="signup">
<input name="name" type="text" placeholder="Your Name">
<input name="email" type="email" placeholder="Email Address">
<input name="organization" type="text" placeholder="Your Organization">
<input type="submit" value="Learn more">
</form>
</section>
<footer>
<p>© Multifaceted Approach, LLC</p>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
// document.ready shorthand
$(function () {
$('.toggleNav').on('click', function () {
$('.flex-nav ul').toggleClass('open');
});
});
</script>
</body>
</html>
Here is the CSS:
/* General CSS Styling */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin: 0;
background-color: black;
background-image: linear-gradient(90deg, #202020, #000000, #202020);
}
a {
color: white;
font-weight: 100;
letter-spacing: 2px;
text-decoration: none;
background: rgba(50, 50, 50, 0.8);
padding: 20px 5px;
display: inline-block;
width: 100%;
text-align: center;
transition: all 0.5s;
}
a:hover {
background: rgba(255, 255, 255, 0.7);
cursor: pointer;
cursor: hand;
color: black;
}
.toggleNav {
display: none;
}
.introduction img {
width: 100%;
max-width: 1200px;
}
.wrapper {
margin: 0 auto;
}
input {
padding: 10px;
border: 0;
}
section,
footer {
text-align: center;
padding: 20px;
margin: 0 auto;
color: white;
font-weight: 100;
}
h1 {
font-size: 3em;
font-weight: 300;
}
h2 {
font-size: 2em;
font-weight: 200;
}
h3 {
font-size: 1.5em;
font-weight: 100;
color: #5092d3;
}
input[type="text"] {
margin-top: 5px;
}
::-webkit-input-placeholder {
color: black;
}
:-moz-placeholder {
/* Firefox 18- */
color: black;
}
::-moz-placeholder {
/* Firefox 19+ */
color: black;
}
:-ms-input-placeholder {
color: black;
}
/* Specific Section/Portion Styling */
.sideBySideImage {
width: 100%;
}
.sideBySideImage img {
width: 49%;
}
.communication img,
.administratorFeatures img {
width: 100%;
max-width: 1200px;
}
.introduction,
.guestFeatures {
background-image: linear-gradient(90deg, #202020, #000000, #202020);
}
.ourMission {
background: #00345a;
}
.ourMission h2 {
margin-bottom: 0;
}
.ourMission p {
display: inline-block;
max-width: 1200px;
color: #5092d3;
font-size: 1.5em;
}
.communication,
.administratorFeatures {
background: black;
}
footer {
white-space: nowrap;
}
/* Flex Container */
.flex-nav ul {
border: 1px solid white;
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
/* Flex Item */
.flex-nav li {
flex: 3;
}
.flex-nav .social {
flex: 1;
}
.fa-facebook {
color: #3b5998;
}
.fa-twitter {
color: #1da1f2;
}
#media all and (max-width:1000px) {
.flex-nav ul {
flex-wrap: wrap;
}
.flex-nav li {
flex: 1 1 50%;
}
.flex-nav .social {
flex: 1 1 25%;
}
}
#media all and (max-width:500px),
(max-device-width:500px) {
a {
font-size: 2em;
}
input,
input::-webkit-input-placeholder {
font-size: 1em;
}
.flex-nav li {
flex-basis: 100%;
}
/* Turn on flexbox */
.wrapper {
display: flex;
flex-direction: column;
}
/* Reorder items */
.wrapper>* {
order: 999;
}
/* Nav */
.flex-nav {
order: 1;
}
.toggleNav {
display: block;
}
.flex-nav ul {
display: none;
}
.flex-nav ul.open {
display: flex
}
}
Mobile Screenshot Of Problem
Embarrassing to admit, but the problem was the omission of a meta viewport tag. Once this was added to the page, everything worked perfectly.
You could try using bootstrap to add a <div class="container-fluid"> and nest the header that's causing you problems within it.
Play around with bootstrap, it'll help make your page responsive to all screen sizes and specifications. By the way, i tested your HTML on a mobile device and didn't see any problems with the headings.
Related
I want to stretch the component to take the full height of the web page but it is not working even after setting the height to 100vh and 100% What can I do to make this work?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
background-color: #428992;
font-size: 62.5%;
font-family: "Inter", sans-serif;
height: 100%;
/* display: flex;
justify-content: center;
align-items: center; */
}
.container {
background-color: #fff;
/* min-width: 750px; */
border-radius: 10px;
box-shadow: 0 5px 10px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
/* height: 100vh; */
/* height: 100%; */
}
.heading,
.subscription,
.activities {
padding: 30px;
}
.heading p {
font-size: 1rem;
line-height: 1.5;
color: #818181;
}
.sub-heading {
color: #cfde7a;
font-size: 1rem;
margin-bottom: 10px;
}
h1 {
color: #49bebd;
font-size: 2rem;
margin-bottom: 10px;
}
div.subscription {
background-color: #2bb4b1;
color: #fff;
}
p {
font-size: 1.6rem;
}
.subscription h3 {
font-size: 1rem;
margin-bottom: 10px;
}
.dollar {
font-size: 2rem;
color: #fff;
}
.price {
font-size: 1rem;
opacity: 0.7;
margin-bottom: 10px;
}
.access {
font-size: 1.2rem;
margin-bottom: 10px;
opacity: 0.8;
}
button {
background-color: #cfde7a;
border-radius: 5px;
font-size: 1.4rem;
font-weight: 500;
color: #fff;
padding: 10px 2px;
width: 100%;
box-shadow: 0 5px 10px 10px rgba(0, 0, 0, 0.1);
border: none;
margin-top: 10px;
}
div.activities {
background-color: #49bebd;
color: #fff;
}
.activities h2 {
font-size: 1rem;
margin-bottom: 10px;
}
ul {
list-style-type: none;
opacity: 0.7;
font-size: 0.7rem;
}
ul li {
line-height: 22px;
}
.price-grid {
display: flex;
}
.price-grid>div {
flex: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Single Price Grid Component</title>
</head>
<body>
<div class="container">
<!-- Heading Section Starts Here-->
<div class="heading">
<h1>Join our community</h1>
<h2 class="sub-heading">30-day, hassle free money back guarantee</h2>
<p>
Gain access to our full library of tutorials along with expert code reviews.
</p>
<p>Perfect for any developers who are serious about honing skills.</p>
</div>
<!-- Price Grid Section Starts Here -->
<div class="price-grid">
<!-- Subscription Section Starts Here-->
<div class="subscription">
<h3>Monthly Subscription</h3>
<p class="price"><span class="dollar">$29</span> per month</p>
<p class="access">Full access for less than $1 a day</p>
<p>
<button>Sign Up</button>
</p>
</div>
<!-- Activities Section Starts Here-->
<div class="activities">
<h2>Why Us</h2>
<ul>
<li>Tutorials by industry experts</li>
<li>Peer & expert code review</li>
<li>Coding exercises</li>
<li>Access to our GitHub repos</li>
<li>Community forum</li>
<li>Flashcards decks</li>
<li>New videos every week</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I want to stretch the component to take the full height of the web page but it is not working even after setting the height to 100vh and 100% What can I do to make this work?
add 100vh height to the body and the div that you want to strech. 100% will not work for height
I want my website to be responsive and adjust to any device. I'm using glitch.com to create this website. For example on mac os, when I set my website to full screen there is a scrolling bar even thought I don't want there to be one. How can I achieve a responsive website? I've tried scaling my website down when on different devices but it wont work. Also, I provided some images and code below (including my website).
Website:
https://runturtle.glitch.me/
Code:
#import url("https://fonts.googleapis.com/css2?family=Rubik&display=swap");
#fname {
margin-bottom: 10px;
}
h1 {
font-weight: bold;
color: #dde6d8;
}
* {
font-family: "Rubik";
user-select: none;
}
form {
margin: auto;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #a0a0a0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
h1 {
align-items: center;
}
h3 {
color: #dde6d8;
}
input {
margin: 0 auto;
border: none;
color: black;
background-color: rgb(white);
width: 50%;
height: 15px;
outline: none;
padding: 9px 10px;
border-radius: 4px;
}
button {
color: #183505;
border: none;
cursor: pointer;
padding: 5px 10px;
background-color: #4d7135;
outline: none;
border-radius: 4px;
}
button:hover {
opacity: 0.8;
}
button:active {
cursor: loading;
}
body {
margin: 0;
padding: 0;
background: #1f2f15;
font-family: ubuntu;
color: white;
}
header {
display: flex;
align-items: center;
background: #486b2c;
}
header img {
width: 50px;
background: white;
border-radius: 5px;
margin: 0 20px 0 40px;
}
.dashboard {
width: 150px;
height: 800px;
position: absolute;
left: 10px;
top: 81px;
}
.home {
opacity: 1;
width: 150px;
}
article {
background: #131b0b;
width: 50%;
margin: 20px auto;
border-radius: 10px;
padding: 10px;
}
hr,
article .date {
color: #a0a0a0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Run Turtle</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img
src="https://cdn.glitch.com/1c916b3c-8432-490c-9650-264f03c95b9e%2Frss-icon.png?v=1630185994030"
width="50px"
/>
<h1><strong>Run Turtle</strong></h1>
</header>
<main>
<article class="dashboard">
<h1>Dashboard</h1>
<hr />
<button
onClick="window.location.href='https://runturtle.glitch.me';"
class="home"
>
Home
</button>
<br />
<br />
<button
onClick="window.location.href='register.html';"
class="register"
>
Register
</button>
</article>
<article>
<h1>Welcome to Run Turtle</h1>
<hr />
<p>
Welcome to Run Turtle. Navigate Run Turtle with the dashboared on the
left.
</p>
</article>
</main>
<script src="index.js"></script>
</body>
</html>
Here's an image of when the browser is resized:
You can use the Bootstrap Grid System for a responsive website. The layout is in the form of rows and columns that can be adjusted depending on the device size.
Here's the documentation link.
Personally, I like AMP (Accelerated Mobile Pages.) I myself use it for my site and it works good with page layouts.
AMP has a page on how to set up your HTML document to make a responsive mobile page. Here is the article
I suggest you to follow #media rule. CSS Grid Layout Module will help you to solve the arisen problem. For an example I have put a solution code.
screenshot_1 screenshot_2
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
background: #486b2c;
}
header img {
width: 50px;
background: white;
border-radius: 5px;
margin: 0 20px 0 40px;
}
.menu {
float: left;
width: 25%;
text-align: center;
}
.menu article {
background-color: #1f2215;
padding: 8px;
height: 800px;
margin-top: 7px;
display: block;
width: 100%;
color: black;
}
input {
margin: 0 auto;
border: none;
color: black;
width: 50%;
height: 15px;
outline: none;
padding: 9px 10px;
border-radius: 4px;
}
button {
color: #183505;
border: none;
cursor: pointer;
padding: 5px 10px;
background-color: #4d7135;
outline: none;
border-radius: 4px;
}
button:hover {
opacity: 0.8;
}
button:active {
cursor: loading;
}
body {
margin: 0;
padding: 0;
background: #1f2f15;
font-family: ubuntu;
color: white;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
}
h1 {
font-weight: bold;
color: #dde6d8;
}
#media only screen and (max-width: 620px) {
.menu,
.main {
width: 100%;
}
.menu {
height: 200px;
}
.main {
background: #1f2f15;
height: 600px;
}
}
</style>
</head>
<body style="font-family:Verdana;">
<div>
<header>
<img src="https://cdn.glitch.com/1c916b3c-8432-490c-9650-264f03c95b9e%2Frss-icon.png?v=1630185994030"
width="50px" />
<h1><strong>Run Turtle</strong></h1>
</header>
</div>
<div>
<div class="menu">
<article>
<h1>Dashboard</h1>
<hr />
<button>
Home
</button>
<br />
<br />
<button>
Register
</button>
</article>
</div>
<div class="main">
<h1>Welcome to Run Turtle</h1>
<hr />
<p>
Welcome to Run Turtle. Navigate Run Turtle with the dashboared on the
left.
</p>
</div>
</div>
Problem: The code in the css stylesheet under .row is suppose to center the navigation menu (nav) so it has the same space from left side as the title. However, it doesn't work.
I tried to use the same css properties on the nav section and that works (that part is commented out). I'm also using the .row class for the features section further down so need to get it to work, but I haven't found any solutions to it. Thanks in advance for any help.
Underneath is my code:
/*
Orange color: #e67e22
*/
/* ---------------------------------------------- */
/* Basic setup */
/* ---------------------------------------------- */
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
/* border: 1px solid;*/
}
html,
body {
background-color: #fff;
color: #555;
font-family: "Lato", "Arial", "sans-serif";
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
}
/* ---------------------------------------------- */
/* REUSABLE COMPONENTS */
/* ---------------------------------------------- */
.row { /* SITE DOESNT ADDJUST TO ROW; WORKS WITH NAV */
max-width: 1140px;
margin: 0 auto;
}
nav{
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
section {
padding: 80px 0;
}
.box {
padding: 1%;
}
/* ---------HEADINGS-------- */
h1,
h2,
h3 {
font-weight: 300;
text-transform: uppercase;
}
h1 { /* H1 doesnt adjust according to relative font-size, nor margins */
font-size: 240%;
margin-top: 0;
margin-bottom: 30px;
color: #fff;
word-spacing: 4px;
letter-spacing: 1px;
}
h2 {
font-size: 180%;
word-spacing: 2px;
text-align: center;
margin-bottom: 30px;
letter-spacing: 1px;
}
h2:after {
display: block;
height: 2px;
background-color: #e67e22;
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 30px;
}
h3 {
font-size: 110%;
margin-bottom: 15px;
}
/* ---------PARAGRAPHS-------- */
.long-copy {
line-height: 145%;
width: 70%;
margin-left: 15%;
}
.box p {
font-size: 90%;
line-height: 145%;
}
/* ---------ICONS-------- */
.icon-big {
font-size: 350%;
display: block;
color: #e67e22;
margin-bottom: 10px;
}
/* ---------BUTTONS-------- */
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s;
}
.btn-full:link,
.btn-full:visited {
background-color: #e67e22;
border: 1px solid #e67e22;
color: #fff;
margin-right: 15px;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #e67e22;
color: #e67e22;
}
.btn:hover,
.btn:active {
background-color: #cf6d17;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #cf6d17;
color: #fff;
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #cf6d17;
color: #fff;
}
/* ---------------------------------------------- */
/* HEADER */
/* ---------------------------------------------- */
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.70)), url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-textbox{
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
height: 100px;
width: auto;
float: left;
margin-top: 20px;
}
.main-nav {
float: right;
list-style: none;
margin-top: 60px;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding-bottom: 8px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0,2;
}
.main-nav li a:hover,
.main-nav li a:active {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid #e67e22;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400&display=swap" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css">
<title>Omnifood</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="resources/img/logo-white.png" alt="Omnifood logo"class="logo">
<ul class="main-nav">
<li>Food delivery</li>
<li>How it works</li>
<li>Our cities</li>
<li>Sign up</li>
</ul>
</div>
</nav>
<div class="hero-textbox">
<h1>Goodbye junk food. <br> Hello super healthy meals.</h1>
<a class="btn btn-full" href="#">I’m hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>
<section class="section-features">
<div class="row">
<h2>Get food fast — not fast food</h2>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</p>
</div>
<div class="row">
<div class="col span-1-of-4 box">
<i class="ion-ios-infinite-outline icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>
Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-2-of-4 box">
<i class="ion-ios-stopwatch-outline icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>
You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-3-of-4 box">
<i class="ion-ios-nutrition-outline icon-big"></i>
<h3>100% organic</h3>
<p>
All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-4-of-4 box">
<i class="ion-ios-cart-outline icon-big"></i>
<h3>Order anything</h3>
<p>
We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
</body>
</html>
The answer is - extra }, closing html,body
/*
Orange color: #e67e22
*/
/* ---------------------------------------------- */
/* Basic setup */
/* ---------------------------------------------- */
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
/* border: 1px solid;*/
}
html,
body {
background-color: #fff;
color: #555;
font-family: "Lato", "Arial", "sans-serif";
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
/* ---------------------------------------------- */
/* REUSABLE COMPONENTS */
/* ---------------------------------------------- */
.row { /* SITE DOESNT ADDJUST TO ROW; WORKS WITH NAV */
max-width: 1140px;
margin: 0 auto;
}
nav{
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
section {
padding: 80px 0;
}
.box {
padding: 1%;
}
/* ---------HEADINGS-------- */
h1,
h2,
h3 {
font-weight: 300;
text-transform: uppercase;
}
h1 { /* H1 doesnt adjust according to relative font-size, nor margins */
font-size: 240%;
margin-top: 0;
margin-bottom: 30px;
color: #fff;
word-spacing: 4px;
letter-spacing: 1px;
}
h2 {
font-size: 180%;
word-spacing: 2px;
text-align: center;
margin-bottom: 30px;
letter-spacing: 1px;
}
h2:after {
display: block;
height: 2px;
background-color: #e67e22;
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 30px;
}
h3 {
font-size: 110%;
margin-bottom: 15px;
}
/* ---------PARAGRAPHS-------- */
.long-copy {
line-height: 145%;
width: 70%;
margin-left: 15%;
}
.box p {
font-size: 90%;
line-height: 145%;
}
/* ---------ICONS-------- */
.icon-big {
font-size: 350%;
display: block;
color: #e67e22;
margin-bottom: 10px;
}
/* ---------BUTTONS-------- */
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s;
}
.btn-full:link,
.btn-full:visited {
background-color: #e67e22;
border: 1px solid #e67e22;
color: #fff;
margin-right: 15px;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #e67e22;
color: #e67e22;
}
.btn:hover,
.btn:active {
background-color: #cf6d17;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #cf6d17;
color: #fff;
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #cf6d17;
color: #fff;
}
/* ---------------------------------------------- */
/* HEADER */
/* ---------------------------------------------- */
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.70)), url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-textbox{
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
height: 100px;
width: auto;
float: left;
margin-top: 20px;
}
.main-nav {
float: right;
list-style: none;
margin-top: 60px;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding-bottom: 8px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0,2;
}
.main-nav li a:hover,
.main-nav li a:active {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid #e67e22;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400&display=swap" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css">
<title>Omnifood</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="resources/img/logo-white.png" alt="Omnifood logo"class="logo">
<ul class="main-nav">
<li>Food delivery</li>
<li>How it works</li>
<li>Our cities</li>
<li>Sign up</li>
</ul>
</div>
</nav>
<div class="hero-textbox">
<h1>Goodbye junk food. <br> Hello super healthy meals.</h1>
<a class="btn btn-full" href="#">I’m hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>
<section class="section-features">
<div class="row">
<h2>Get food fast — not fast food</h2>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</p>
</div>
<div class="row">
<div class="col span-1-of-4 box">
<i class="ion-ios-infinite-outline icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>
Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-2-of-4 box">
<i class="ion-ios-stopwatch-outline icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>
You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-3-of-4 box">
<i class="ion-ios-nutrition-outline icon-big"></i>
<h3>100% organic</h3>
<p>
All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-4-of-4 box">
<i class="ion-ios-cart-outline icon-big"></i>
<h3>Order anything</h3>
<p>
We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
</body>
</html>
hi there just change the style of .row like this :
.row {
width: 100%;
position: absolute;
text-align: center;
display: inline-grid;
margin-top: -147px;
right: 70px;
}
I've been following a responsive web design tutorial and I just cant get my head round this problem. I've included the grid.css file in my html but some how chrome doesnt display it correctly. Instead of grid I get rows like in the attached image. Can someone please help me out with this?
Thank you
No grid
/* --------------------------- */
/* BASIC SETUP */
/* --------------------------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #fff;
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
/* --------------------------- */
/* REUSABLE COMPONENTS */
/* --------------------------- */
.row {
max-width: 1140px;
margin: 0 auto;
}
section {
padding: 80px 0;
}
/*----- HEADINGS ----- */
h1 {
margin-top: 0;
margin-bottom: 20px;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: : 1px;
word-spacing: 4px;
}
/*----- BUTTONS ----- */
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
color: #fff;
transition: background-color 0.2s, border 0.2s, color 0.2s;
}
.btn-full:link,
.btn-full:visited {
background-color: #e67e22;
border: 1px solid #e67e22;
color: #fff;
margin-right: 15px;
}
.btn-ghost:link,
.btn-ghost:visited{
border: 1px solid #e67e22;
color: #e67e22;
}
.btn:hover,
.btn:active {
background-color: #cf6d17;
}
.btn-full:hover,
.btn-full:active {
border: 1px solid #cf6d17;
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #cf6d17;
color: #fff;
}
/* --------------------------- */
/* HEADER */
/* --------------------------- */
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
height: 100px;
width: auto;
float:left;
margin-top: 20px;
}
.main-nav {
float:right;
list-style: none;
margin-top: 55px;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding: 8px 0px;
color: #fff;
text-decoration:none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
}
.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid #cf6d17;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors-stuff%2520downloaded%2520from%2520Internet/css_downloaded/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors-stuff%2520downloaded%2520from%2520Internet/css_downloaded/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet" type="text/css">
<title>Omnifood</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="resources/css/img/logo-white.png" alt="Omnifood logo" class="logo">
<ul class="main-nav">
<li>Food delivery</li>
<li>How it works</li>
<li>Our cities</li>
<li>Sign up</li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye junk food.<br> Hello super healthy meals</h1>
<a class="btn btn-full" href="#">I'm hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>
<section class="section-features">
<div class="row">
<h2>Get food fast — not fast food.</h2>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</p>
</div>
<div class="row">
<div class="col span-1-of-4">
<h3>Up to 365 days/year</h3>
<p>
Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-1-of-4">
<h3>Ready in 20 minutes</h3>
<p>
You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-1-of-4">
<h3>100% organic</h3>
<p>
All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-1-of-4">
<h3>Order anything</h3>
<p>
We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
</body>
</html>
/* SECTIONS ============================================================================= */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* GROUPING ============================================================================= */
.row {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.row:before,
.row:after {
content:"";
display: table;
}
.row:after {
clear:both;
}
/* GRID COLUMN SETUP ==================================================================== */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
/* REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */
#media only screen and (max-width: 480px) {
.col {
/*margin: 1% 0 1% 0%;*/
margin: 0;
}
}
/* GRID OF TWO ============================================================================= */
.span-2-of-2 {
width: 100%;
}
.span-1-of-2 {
width: 49.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-2-of-2 {
width: 100%;
}
.span-1-of-2 {
width: 100%;
}
}
/* GRID OF THREE ============================================================================= */
.span-3-of-3 {
width: 100%;
}
.span-2-of-3 {
width: 66.13%;
}
.span-1-of-3 {
width: 32.26%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-3-of-3 {
width: 100%;
}
.span-2-of-3 {
width: 100%;
}
.span-1-of-3 {
width: 100%;
}
}
/* GRID OF FOUR ============================================================================= */
.span-4-of-4 {
width: 100%;
}
.span-3-of-4 {
width: 74.6%;
}
.span-2-of-4 {
width: 49.2%;
}
.span-1-of-4 {
width: 23.8%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-4-of-4 {
width: 100%;
}
.span-3-of-4 {
width: 100%;
}
.span-2-of-4 {
width: 100%;
}
.span-1-of-4 {
width: 100%;
}
}
The three images in my code stay in place when the browser is resized. I'd like them to move and stack up instead. I'm struggling to figure out, and any help would be much appreciated.
This is my code (I'm a newbie):
<!DOCTYPE html>
<title>Bad Doc</title>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
#media only screen and (max-width: 320px) {
body {
background-color: lightblue;
}
}
.body {
margin: 0;
padding: 0;
}
a.item:hover {
background-color: gray;
}
a:link {
text-decoration: none;
}
p {
font-family: "Garamond", Times, serif;
}
.wrapper {
border: 1px solid blue;
padding: 1px;
}
.thing1 {
border: 1px solid blue;
float: left;
}
.content {
border: 1px solid blue;
overflow: auto;
}
h1 {
font-size: 72px;
text-align: center;
margin: 0 0 20px 0;
font-family: "Garamond", Times, serif;
}
ul {
margin-right: 10px;
padding: 0 20px 0 20px;
}
li {
list-style-type:none;
font-family: "Garamond", Times, serif;
font-size: 14px;
}
.photos {
display: inline;
}
img {
max-width: 30%;
height: auto;
opacity: 0.7;
filter: alpha(opacity=70);
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
#footer p {
text-align: center;
font-size: 14px;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>gage</h1>
<div class="thing1">
<UL>
<li><a class="item" href=" ">about</a></li>
<li><a class="item" href=" ">contact</a></li>
</ul>
</div>
<div class="content">
<div class="photos">
<img src="25612060593_b222234b86_b.jpg">
<img src="25612060593_b222234b86_b.jpg">
<img src="25612060593_b222234b86_b.jpg">
</div>
</div>
<div id="footer">
<P>More stuff</p>
</div>
</div>
</body>
</html>
You have a max-width set to 30%, use a media query to change this to 100% on smaller screens.