I am using Simple Grid and looking to expand the width of my background image of a grid container to the full width of the browser. I have tried multiple techniques to expand the image, but nothing has been working. Should I wrap the container in another div and use that div as a background, or is there a simple css fix to my issue?
HTML: (Div id is "body-wrapper-grid")
TEST
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link type="text/javascript" src="navicon.js">
</head>
<body>
<!-- Start Navigation Grid -->
<div class="grid" id="nav-wrapper-grid">
<!-- Start Columns -->
<div class="col-1-1">
<!-- Start Navigation Wrapper -->
<nav id="nav-wrapper">
<div id="links">
<img src="images/TEST.png" />
<ul id="nav">
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
<li>TEST</li>
</ul>
</div>
</nav>
<!-- End Navigation Wrapper -->
</div>
<!-- End Columns -->
</div>
<!-- End Navigation Grid -->
<!-- Start Mission Statement Grid -->
<div class="grid grid-pad" id="body-wrapper-grid">
<div class="col-7-12" id="iphone-mockup">
<img src="images/iphoneMockup.png" />
</div>
<div class="col-5-12" id="mission-statement">
<div id="main-logo">
<img src="images/image.png"/>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id malesuada est. Sed elementum magna dictum aliquam fringilla. Pellentesque nec viverra augue. Nam cursus arcu nec bibendum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent est nisl, pretium sed diam a, porta gravida urna. Donec facilisis eleifend lectus, ac facilisis eros vehicula a. Curabitur hendrerit, risus non pharetra semper, mi ipsum viverra arcu, a tincidunt velit neque vitae enim. Cras elementum est sit amet luctus aliquet.</p>
<div id="app-store-badge">
<img src="images/appStoreBadge.png" />
</div>
</div>
</div>
<!-- End Mission Statement Grid -->
CSS:
html, body {
margin: 0;
padding: 0;
background-color: #cecece;
overflow-x: hidden;
font-family: 'HouschkaAlt', Fallback, sans-serif;
}
#font-face {
font-family: 'HouschkaAlt';
src: url('fonts/FontName.eot');
src: url('fonts/FontName.eot?iefix') format('eot'),
url('fonts/FontName.woff') format('woff'),
url('fonts/HouschkaAlt-Medium.ttc') format('truetype');
font-weight: normal;
font-style: normal; }
#nav-logo img {
width: 150px;
height: 40px;
}
.grid {
background-color: #fff;
}
/* NAVIGATION LINKS */
li a {
display: block;
width:100%;
background:#fff;
color: #3d6430;
font-size: 15px;
line-height: 40px;
text-decoration: none;
margin-top: 5px;
padding-left: 20px;
}
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
#nav-wrapper-grid {
background-color: #fff;
overflow: hidden;
width: 100%;
left:0;
z-index: 100;
}
#links {
width: 960px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
}
#nav-logo {
float: left;
display: inline;
}
ul {
width:100%;
background-color: #fff;
height: 40px;
padding: 0;
display: inline;
}
li {
padding: 0 20px;
float: left;
list-style-type: none;
}
#menu {
display: none;
}
#body-wrapper-grid {
background: url('images/downtown.jpg') 0 0 repeat-x;
width: 9999px;
padding-bottom: 0px;
margin-bottom: 0px;
overflow: hidden;
}
#iphone-mockup img {
vertical-align: bottom;
margin: 0 auto;
padding-bottom: 0px;
}
#mission-statement {
text-align: center;
background-color: #fff;
margin: 0px;
padding: 10px;
float: right;
}
#main-logo img {
display: block;
margin: auto;
}
/* APP STORE BADGE */
#app-store-badge img {
width: 200px;
height: 50px;
padding-bottom: 10px;
}
}
#features-detail-grid h3, p {
text-align: center;
color: #3d6430;
font-weight: bold;
}
/* Navigtion for Small Devices */
#media screen and (max-width: 768px) {
#nav-wrapper-grid {
background-color: #fff;
overflow: hidden;
width: 100%;
left:0;
z-index: 100;
}
#menu {
width:1.4em;
display: block;
background:#fff;
font-size:1.35em;
text-align: center;
color: #3d6430;
float: right;
top:0;
}
#logo {
float: none;
}
#nav.js {
display: none;
padding: 0;
}
ul {
width:100%;
list-style:none;
height: auto;
}
li {
width:100%;
border-right:none;
border-top: 1px solid #3d6430;
}
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) { ... }
See if this helps you: http://jsfiddle.net/panchroma/DK9rJ/
I've commented out some of your images so it's easier to see what's happening. The important bit is that I've added a wrapper around the area where you want the full size image background and that this wrapper is outside the div of class grid.
<div class="body-background">
<div class="grid grid-pad" id="body-wrapper-grid">
....
</div> <!-- close class="grid grid-pad" id="body-wrapper-grid" -->
</div> <!-- close body-background -->
Since the <div class="body-background"> is outside the <div class="grid ..> it will extend full width and you will be good to go.
Good luck!
Related
After moving things around, I tried to change the position: absolute to position: relative of the actual iframe class, it made the video position under 'Featured' but the dimension of the video is messed up. If I change it back to position: absolute, the video covers the entire page banner, but the responsiveness is good, however the dimension is too big. How do I make it look like the video is under the Featured page, aligned in the center, and responsive as well?
This is my code:
#import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
/*setting font size as 62.5%=10px for easier REM fontsize calculations*/
html, body {
font-size: 62.5%;
height: 100%;
margin: 0;
font-family: font-family: 'Playfair Display', serif;
}
/*making the image parallax as a banner*/
.parallax1 {
background: url(https://i.imgur.com/6wPsROo.png);
min-height: 100%;
background-position: center;
position: relative;
opacity: .95;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
top: 0;
}
* {
padding: 0;
margin: 0;
text-declaration: none;
list-style: none;
box-sizing: border-box;
}
body {
background-color: white;
}
/*customizing banner text*/
#slogan {
font-size: 4.5rem;
color: white;
text-shadow: 1px 1.5px 1px #A26B40;
font-weight: lighter;
}
.heading2 {
width: 100%;
height: auto;
left: 0;
top: 50%;
position: absolute;
text-align: center;
line-height: 3.2rem;
}
#slogan-subheading {
font-size: 2.5rem;
color: white;
text-shadow: .5px .5px 1px #A26B40;
font-weight: lighter;
}
#shop-now {
background-color: #bd8d58;
width: 10%;
height: auto;
margin: 0 auto;
position: relative;
padding: 0px;
color: white;
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
}
#shop-now:hover {
cursor: pointer;
}
/*make container for each row comprising an image with caption side by side*/
.prod-container {
flex-direction: row;
display: flex;
padding: 10px 20px;
text-align: center;
justify-content: center;
}
/*customize each cell*/
.image-and-capt {
padding: 10px 40px;
}
/*customize productimg*/
#product-img {
width: 200px;
border-radius: 50%;
box-shadow: 3px 5px 15px rgba(182,124,72,0.3);
}
/*customize product name & description*/
#product-name, #product-descrp {
font-family: 'Open Sans', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: rgba(54, 46, 39, 0.8);
}
#product-name {
font-size: 1.5rem;
padding-top: 10px;
}
#product-descrp {
font-size: 1rem;
padding-top: 4px;
}
.featured-container {
background: rgba(255, 214, 170, 0.6);
padding: 50px 100px;
}
.vid-container {
position: relative;
width: 100%;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
}
.vid-container-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
bottom: 0;
right: 0;
display: block;
margin: 0 auto;
}
/*centering the logo and customizing size*/
#header-img {
max-width: 200px;
max-height: auto;
height: auto;
width: auto;
padding: 10px 0px 0px 0px;
}
/*customizing the navigation links*/
.nav-link {
text-decoration: none;
color: #54473C;
font-family: 'Playfair Display', serif;
display: column;
font-size: 1.5rem;
}
/*customizing the actual navigation bar*/
#nav-bar {
background-color: rgb(248, 234, 203);
height: 80px;
width: 100%;
padding: 0px 20px 0px 50px;
z-index: 1000;
position: fixed;
top: 0;
width: 100%;
transition: 0.6s;
}
/*aligning the nav links on the right of the header image*/
nav ul {
float: right;
padding: 0px 20px;
}
/*aligning the links to become horizontally aligned next to each other*/
nav ul li {
display: inline-block;
padding: 25px 10px 5px 50px;
margin-left: 0px;
}
/* customizing appearance of nav-links when hovered*/
.nav-link:hover, nav-link:focus {
background-color: #dcbd85;
padding: 8px;
border-radius: 5px;
transition: .5s;
color: white;
}
/* customizing nav-link when focused or clicked */
.nav-link:focus {
background-color: #dcbd85;
padding: 8px;
border-radius: 5px;
color: white;
}
/* customizing the three bars, making it invisible if in default full page view */
.check-bar {
font-size: 2.5rem;
color: #BF8D7A;
float: right;
cursor: pointer;
margin-right: 5px;
line-height: 80px;
display: none;
}
/*making the checkbox invisible, this checkbox is used as a condition later, that when checked itll make the navlinks appear in a a specific media query*/
#check {
display: none;
}
body, html {
height: 100%;
}
.products-container {
background: #f6f7e9;
padding: 50px 80px;
}
#sections {
font-family: 'Open Sans', sans-serif;
text-align: center;
width: 45%;
font-weight: 800;
font-size: 4rem;
margin: 0 auto;
text-transform: uppercase;
font-weight: lighter;
color: rgba(54, 46, 39, 0.5);
width: 100%;
text-align: center;
border-bottom: 1px solid rgba(54, 46, 39, 0.1);
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background: #f6f7e9;
padding: 0 10px;
}
#media (max-width: 792px){
.nav-link{
font-size: 1.3rem;
}
#header-img{
max-width: 175px;
max-height: auto;
}
}
#media (max-width: 712px){
.nav-link{
font-size: 1.2rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
}
#media (max-width: 675px){
.nav-link{
font-size: 1.3rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
nav ul li {
padding: 25px 10px 5px 50px;
margin-left: -30px;
}
}
#media (max-width: 675px){
.nav-link{
font-size: 1.1rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
nav ul li {
padding: 25px 10px 5px 50px;
margin-left: -40px;
}
}
/*configure what happens when you click three bars*/
#media (max-width: 500px){
.check-bar{
display: block;
}
/*center the logo , not yet done */
#header-img {
max-width: 200px;
max-height: auto;
display: block;
margin: auto;
}
ul{
position: fixed;
width: 100%
height: 100vh;
top: 80px;
/*when three bars are clicked the left bottom right values makes the whole ul disappear*/
left: -100%;
bottom: -100%;
right: 100%;
text-align: center;
background: rgba(255, 214, 170, 0.9);
transition: all .5s;
/* for stack, this makes the ul box in front of the parallax image since its z index is greater than the parallax*/
z-index: 2;
}
nav ul li {
display: block;
padding: 20px;
}
.nav-link {
font-size: 1.6rem;
font-weight: bold;
margin-left: 60px
}
#check:checked ~ul {
left: 0;
right: 0;
bottom: 0;
}
.nav-link:hover {
background: none;
color: #BF8D7A;
}
.parallax1 {
z-index: 1;
}
}
#media (max-width: 467px){
#header-img{
max-width: 190px;
}
.nav-link {
font-size: 1.6rem;
}
}
#media (max-width: 314px){
#header-img{
max-width: 200px;
margin: auto auto 0px auto;
padding-top: 10px;
}
.nav-link {
font-size: 1.2rem;
}
.check-bar {
font-size: 1.8rem;
}
#nav-bar {
padding-left: 10px;
}
}
#media (max-width: 271px){
#header-img{
max-width: 200px;
margin: auto auto 0px 0px;
padding-top: 5px;
}
.nav-link {
font-size: 1.2rem;
}
.check-bar{
font-size: 1.8rem;
}
#nav-bar {
padding-left: 10px;
}
}
#media (max-width: 251px){
#header-img{
max-width: 180px;
padding-top: 10px;
padding-left: 0px;
padding-right: 0px;
margin: 0px;
}
.nav-link {
font-size: 1.2rem;
}
#nav-bar {
padding-left: 8px;
}
.check-bar {
font-size: 1.8rem;
padding-top: 0px;
}
}
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<body>
<header id="header">
<nav id="nav-bar">
<input type="checkbox" id="check">
<label for="check" class="check-bar">
<i class="fas fa-bars"></i>
</label>
<img id="header-img" src="https://i.imgur.com/zxchwt8.gif">
<ul>
<li id="nav-links-list"><a class="nav-link" href="#the-products">products</a></li>
<li id="nav-links-list"><a class="nav-link" href="#featured" target=_blank>featured</a></li>
<li id="nav-links-list"><a class="nav-link" href="#pricing" target=_blank>pricing</a></li>
<li id="nav-links-list"><a class="nav-link" href="#contacts" target=_blank>contact</a></li>
</ul></nav></header>
<div class="parallax1">
<div class="heading2">
<span class="border">
<h1 id="slogan">Pamper your skin.</h1>
<h3 id="slogan-subheading">Cruelty-free, environmentally conscious, and organic. </h3>.
<span id="box"><h4 id="shop-now">SHOP NOW</h4></span
</div>
</div>
<div class="products-container">
<section id="the-products">
<h2 id="sections"><span>products</span></h2>
<div class="image-and-capt">
<div class="prod-container">
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/iSuRo4f.png" alt ="mock-up foundation">
<h3 id="product-name"> Foundation with SPF 50 </h3>
<p id="product-descrp"> Medium-coverage, long-lasting, and available in 50 shades.
</div>
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/KSXpO9w.png" alt="moisturizer">
<h3 id="product-name"> Moisturizer for All Skin Types</h3>
<p id="product-descrp"> Nourishing and brightening, reduces appearance of fine lines and wrinkles.
</div>
</div>
<div class="prod-container">
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/cqzlfal.png" alt ="mock-up tinted moisturizer">
<h3 id="product-name"> Tinted Moisturizer </h3>
<p id="product-descrp"> Light-coverage with 50 shades, nourishing and brightening.
</div>
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/UdInLk3.png" alt ="mock-up face wash">
<h3 id="product-name"> Facewash </h3>
<p id="product-descrp"> Gentle and hydrating facewash, thourougly cleanses dirt, make-up and sebum.</p>
</div>
</div>
</section>
</div>
<section id="featured">
<div class="featured-container">
<h2 id="sections">featured</h2>
<div class"vid-container">
<iframe class="vid-container-iframe" src="https://www.youtube.com/embed/MJMMZvBK6nU?autoplay=1&showinfo=0&rel=0&color=white" width="560" height="315" frameborder="0"></iframe>
</div>
</section></div>
<section id="pricing">
<p>Nam fermentum risus libero, ac ultricies leo faucibus nec. Nulla rhoncus nulla massa, dignissim finibus magna bibendum a. Morbi et aliquet justo, eu sagittis lectus. Quisque orci ipsum, aliquet ornare porttitor eget, fringilla quis purus. Integer eu semper eros. Donec quis libero at diam eleifend porttitor rutrum eu ipsum. Mauris sapien ipsum, gravida non ipsum sit amet, viverra facilisis mauris. Proin lacinia lectus vitae interdum condimentum. Quisque viverra sit amet diam ut finibus. Etiam nec ullamcorper magna.</p>
</section>
<section id="contact">
<p>Nam fermentum risus libero, ac ultricies leo faucibus nec. Nulla rhoncus nulla massa, dignissim finibus magna bibendum a. Morbi et aliquet justo, eu sagittis lectus. Quisque orci ipsum, aliquet ornare porttitor eget, fringilla quis purus. Integer eu semper eros. Donec quis libero at diam eleifend porttitor rutrum eu ipsum. Mauris sapien ipsum, gravida non ipsum sit amet, viverra facilisis mauris. Proin lacinia lectus vitae interdum condimentum. Quisque viverra sit amet diam ut finibus. Etiam nec ullamcorper magna.</p>
</section>
</div>
</header>
</body>
Your code is a mess to be honest. You have multiple div without closing tag,p without closing tags,
also some = are missing while declaring classes in your html code.
First go through your code, make sure that every single tag has a closing tag, after that continue with your video because if you dont fix these things, then your responsivity will be broken because of those unclosed tags.
Have a look into that, i have fixed the video so now it is under your featured section, you just have to play around with it to make it responsive after you closed every unclosed tag.
<section id="featured">
<div class="featured-container">
<h2 id="sections">featured</h2>
<div class="vid-container">
<iframe class="vid-container-iframe"
src="https://www.youtube.com/embed/MJMMZvBK6nU?autoplay=1&showinfo=0&rel=0&color=white" width="560"
height="315" frameborder="0"></iframe>
</div>
</div>
</section>
So I am trying to center my image inside one of my two columns. In this case is the left column. Take the image below for example.
I got some text in column two, but the image in column one does not look center as the way I envision it. Here is what it is currently looking like right now.
The red circled is where I want my picture to actually be located.
Here is my code
/* Regular Desktop View */
h1 {
display: none;
}
img {
width: 170px;
height: 170px;
border-radius: 50%;
text-align: center;
}
h2 {
text-align: left;
margin-top: 30px;
}
p {
margin-right: 50px;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 15px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* End regular Desktop View */
/* Tablet/Smartphone view begins */
#media screen and (max-width: 768px) {
img {
width: 170px;
height: 170px;
display: block;
margin-left: auto;
margin-right: auto;
}
h1 {
display: block;
font-family: sans-serif, arial, verdana, lucida;
}
h2 {
text-align: center;
}
p {
width: 100%;
padding: 10px;
}
/* Home Page */
.column {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="main.css">
<style>
/* Regular Desktop View */
h1 {
display: none;
}
img {
width: 170px;
height: 170px;
border-radius: 50%;
text-align: center;
}
h2 {
text-align: left;
margin-top: 30px;
}
p {
margin-right: 50px;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 15px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* End regular Desktop View */
/* Tablet/Smartphone view begins */
#media screen and (max-width: 768px) {
img {
width: 170px;
height: 170px;
display: block;
margin-left: auto;
margin-right: auto;
}
h1 {
display: block;
font-family: sans-serif, arial, verdana, lucida;
}
h2 {
text-align: center;
}
p {
width: 100%;
padding: 10px;
}
/* Home Page */
.column {
width: 100%;
}
}
</style>
</head>
<body>
<ul class="topnav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu">
<li>Home
<li>About</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Contact Me</li>
</div>
</ul>
<h1 align="center">HOME</h1>
<div class="row">
<div class="column">
<img src="img/image1.jpg" class="float-center">
</div>
<div class="column">
<h2>This is an h2 Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
</p>
</div>
</div>
</body>
</html>
When I view this in full screen in desktop mode, it is just not how I want it. But when I resize my browser to tablet/smartphone mode, I'm cool with that. My goal here is to center the image in column one no matter how you resize it under it reaches the pixels max-width.
As by default <img> tag in HTML5 is an inline-block element, you can center it by applying the text-align: center; to it. This may seem unintuitive as it says center text to center, but it actually applies to all content that is of type inline-block.
Find below the updated snippet with a new class .centered that has been added to the first column, so that only the its contents get centered.
/* Regular Desktop View */
h1 {
display: none;
}
img {
width: 170px;
height: 170px;
border-radius: 50%;
text-align: center;
}
h2 {
text-align: left;
margin-top: 30px;
}
p {
margin-right: 50px;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 15px;
}
.centered {
text-align: center;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* End regular Desktop View */
/* Tablet/Smartphone view begins */
#media screen and (max-width: 768px) {
img {
width: 170px;
height: 170px;
display: block;
margin-left: auto;
margin-right: auto;
}
h1 {
display: block;
font-family: sans-serif, arial, verdana, lucida;
}
h2 {
text-align: center;
}
p {
width: 100%;
padding: 10px;
}
/* Home Page */
.column {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="main.css">
<style>
/* Regular Desktop View */
h1 {
display: none;
}
img {
width: 170px;
height: 170px;
border-radius: 50%;
text-align: center;
}
h2 {
text-align: left;
margin-top: 30px;
}
p {
margin-right: 50px;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 15px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* End regular Desktop View */
/* Tablet/Smartphone view begins */
#media screen and (max-width: 768px) {
img {
width: 170px;
height: 170px;
display: block;
margin-left: auto;
margin-right: auto;
}
h1 {
display: block;
font-family: sans-serif, arial, verdana, lucida;
}
h2 {
text-align: center;
}
p {
width: 100%;
padding: 10px;
}
/* Home Page */
.column {
width: 100%;
}
}
</style>
</head>
<body>
<ul class="topnav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu">
<li>Home
<li>About</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Contact Me</li>
</div>
</ul>
<h1 align="center">HOME</h1>
<div class="row">
<div class="column centered">
<img src="img/image1.jpg" class="float-center">
</div>
<div class="column">
<h2>This is an h2 Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
</p>
</div>
</div>
</body>
</html>
A good tip for the future is to keep you HTML separate from your CSS styling – try to have as few (if not none) inline styling and <style> tags in your HTML, and reference your stylesheets with <link> tags. Learn more about this from this W3Schools tutorial.
Here is what my plan was (in sketch). From desktop to mobile.
I was able to ask the right question in another forum and I got this answer.
HTML
<div class="parent">
<div class="image">
<img src="https://i.redd.it/q2iv8opn50kz.jpg" style="width: 170px; height: 170px; border-radius:50%;">
</div>
<div class="text">
<h2>This is an h2 tag</h2>
<p>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions
from the 1914 translation by H. Rackham.
</p>
</div>
</div>
CSS
.parent {
display: flex; /* Where the mobile part begins */
justify-content: center;
text-align: center;
flex-wrap: wrap;
padding: 50px 0 0 30px;
}
.parent div {
height: 200px;
width: 300px;
}
img {
width: 170px;
height: 170px;
}
Now I have it in two somewhat "columns," it works!
I'm hoping someone is able to help with an issue I'm currently having with a website I am designing. The media query for mobile is where I'm getting hung up.
This is an image of it.
The content isn't centered. I can fix the text simply with a text-align property, and I assume that I can just make the image display as a block and use margin: 0 auto to center it, the problem is that the container itself is not centered. I'm using Bootstrap, and it's all in a Bootstrap container.
I think part of the issue is that on small screens, I am hiding some content that is to the right of the content I can't get centered using Bootstrap's "hidden-xs" and "hidden-sm" properties.
Here is the code for the relevant section in the screenshot, plus my CSS for the media query. If anyone could point me in the right direction, I'd appreciate it.
/* Content Styles*/
.gas-content {
margin: 4.50em 0 4.50em 5%;
}
.left-content {
margin: 2.50em 0 2.50em 5%;
}
.content-container {
width: 75%;
float: left;
}
.test-container {
width: 25%;
float: left;
margin-top: -10px;
}
.move-up {
margin-top: -2em;
}
.move-down {
margin-top: 2em;
}
.img-center {
display: block;
margin: 0 auto;
}
.content-heading {
color: rgb(3, 17, 85);
font-family: 'Montserrat', sans-serif;
font-weight: 600;
line-height: 1.50em;
}
.services li {
color: rgb(3, 17, 85);
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 1.25em;
font-weight: 600;
}
.emergency-services li {
color: rgb(3, 17, 85);
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 1.25em;
font-weight: 600;
}
.contact-box {
background-color: rgb(3, 17, 85);
padding: 2em 0 6.50em 0;
}
.contact-box h3 {
color: white;
text-transform: uppercase;
margin-left: 15px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
.contact-info {
color: white;
margin-left: 15px;
}
.eztouselogo {
margin-left: 15px;
margin-bottom: 15px;
}
.services-left {
margin-right: 0.50em;
}
.content-paragraph {
font-family: 'Open Sans', sans-serif;
margin-bottom: 5em;
line-height: 2.25em;
}
#media (max-width: 991px) {
.test-container {
display: none;
}
.content-container {
display: block;
margin: 0 auto;
padding: 0 0 0 0;
float: none;
clear: both;
}
.container {
display: block;
margin: 0 auto;
float: none;
clear: both;
}
.pipes-img {
width: 75%;
height: 75%;
display: block;
margin: 0 auto;
float: none;
}
}
<!--Begin Main Content -->
<div class="container"> <!--New Container -->
<div class="content-container"> <!--Content on Left Side of Testimonials -->
<div class="row gas-content"> <!--Gas, Water, & Sewer Line Row -->
<div class="col-md-4">
<img class="pull-left img-responsive pipes-img" src="img/pipes.jpg">
</div>
<div class="col-xs-8 move-up">
<h3 class="content-heading">Gas, Water, & Sewer Line Inspection and Replacement in the Pittsburgh Area</h3>
<p class="content-paragraph">Vivamus id ante molestie, vehicula justo nec, facilisis justo. Sed efficitur feugiat accumsan. Nunc vitae fermentum nulla. Aliquam imperdiet nunc felis, et malesuada ligula molestie eget. Proin sodales dictum semper. Proin nec sodales quam. Maecenas ac erat non mauris laoreet volutpat. Proin egestas enim ut magna sagittis vulputate. Aenean non odio lacus. Nam vehicula metus viverra quam laoreet, nec interdum orci porttitor. Etiam gravida velit sit amet commodo suscipit. Cras est erat, scelerisque quis velit non, luctus molestie ex.</p>
<div class="row">
<div class="col-xs-5">
<ul class="services services-left">
<li>Sewer Lines</li>
<li>Gas Lines</li>
<li>Water Lines</li>
</ul>
</div>
<div class="col-xs-7">
<ul class="services services-right">
<li>Sewer Inspections</li>
<li>Water Heaters</li>
<li>Full-Service Plumbing</li>
</ul>
</div>
</div>
</div>
</div> <!--End Gas, Water, & Sewer Line Row -->
Change col-xs-8 to col-md-8 to match the same breakpoint as that on the image. Otherwise, the div wrapping the image will be 100%, but the sibling div will remain 2/3s width.
I don't think we (web developer) need to customize the media query of Bootstrap Framework. Bootstrap has built-in or default media query that fits to all devices such as :
Extra small devices Phones (<768px)
Class prefix : .col-xs-
Small devices Tablets (≥768px)
Class prefix : .col-sm-
Medium devices Desktops (≥992px)
Class prefix : .col-md-
Large devices Desktops (≥1200px)
Class prefix : .col-lg-
We just need to use it "cleverly" as it is.
I'm unsure how to make the main container ("main") centred? The div box needs to be centred but it is stuck on the left. I wish to keep a certain amount of margin between the overall space and the main div section, but I don't wish to restrict it to snap left?
I am still learning CSS. Any feedback on the layout or how I've done my coding is appreciated. Many thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Business Title</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<header>
<img class="mainImage" src="image/logo.png">
</header>
</head>
<body>
<div class="main">
<h1>Simple Business.</h1>
<ul>
<li>I need Option 1.</li>
<li>I just need Option 2.</li>
<li>I just need Option 3.</li>
<li>I need Option 4.</li>
</ul>
<footer>
<h1>About THIS BUSINESS.</h1>
<p class="about"> Insert About Text Here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae dolor nibh. Ut at pulvinar ex. Cras nibh ante, iaculis quis aliquet at, placerat quis enim. In maximus nulla ut commodo sollicitudin. Etiam a erat laoreet augue tempus pellentesque. Fusce tempor sed urna in cursus. Sed lectus leo, tempor sed magna quis, maximus vulputate velit. Ut non pellentesque arcu, quis placerat magna. Cras ac odio in leo egestas convallis. Nunc egestas pulvinar placerat.
</p>
</footer>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
----------
**CSS:**
/******************************************
/* SETUP
/*******************************************/
/* Box Model Hack */
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
}
/* Clear fix hack */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear {
clear: both;
}
.alignright {
float: right;
padding: 0 0 10px 10px; /* note the padding around a right floated image */
}
.alignleft {
float: left;
padding: 0 10px 10px 0; /* note the padding around a left floated image */
}
/******************************************
/* BASE STYLES
/*******************************************/
body {
color: #000;
background-color: #ececec;
font-size: 12px;
line-height: 1.4;
font-family: Helvetica, Arial, sans-serif;
text-align: center;
}
h1 {
font-family:'Arial Black';
font-size: 4em;
padding-top: 5px;
}
li {
text-decoration: none;
font-size: 2em;
line-height: 2.5em;
color: #FF48D0;
}
ul {
list-style: none;
padding: 0;
}
.mainImage {
width:75%;
max-width:483px;
}
a:active, a:hover {outline: 0 none; text-decoration: none;}
a {text-decoration: none}
/******************************************
/* LAYOUT
/*******************************************/
.main {
background-color: #FFF;
margin:1em;
margin-left: 2em;
margin-right: 2em;
float: center;
max-width: 960px;
}
.about, p {
float:center;
max-width: 960px;
padding-left: 1em;
padding-right: 1em;
text-align: justify;
}
header {
padding:10px;
}
footer {
padding: 5px;
}
/******************************************
/* ADDITIONAL STYLES
/*******************************************/
/* =======================================================================
Media Queries
========================================================================== */
#media only screen and (max-width: 930px) {
.main {
max-width: 95%;
margin: 0 auto;
text-align:center;
padding-bottom: 1.5em;
float: none;
}
h1 {
font-size: 2.5em;
text-align: center;
}
li {
font-size: 2em;
line-height: 2.5em;
}
}
#media only screen and (max-width: 480px) {
.main {
max-width: 95%;
}
h1 {
font-size: 2em;
text-align: center;
}
li {
font-size: 1.4em;
line-height: 2em;
}
}
You just need to add margin: 0 auto; to your css for that element.
Like so:
.main {
margin: 0 auto;
}
This will centre the element automatically to the users browser.
CSS Margins
The classical way to center an element with CSS is to set left and right margin to auto
Your code should be
.main {
background-color: #FFF;
margin: 1em auto;
max-width: 960px;
}
.main {
background-color: #FFF;
max-width: 960px;
display: table;
margin: 0 auto;
}
Fiddle: Demo
I am here just to ask a quick question.. I am trying to use CSS media queries in order to make my current website compatable with mobile devices, however everything I type in seems to not make any kind of difference? I really am new to CSS at the moment.
Here is my HTML
<html>
<head>
<!--<link href="styles.css" rel="stylesheet" type="text/css">-->
</head>
<title>Cochranes Law Firm</title>
<body>
<div id="wrapper">
<div id="header">
<img src="images/logo.png">
<div id="nav">
<div id="Search">
<input type="text" name="Search"> <img
src="images/search.png" class="mag">
</div>
<ul>
<li class="Home">Home </li>
<li class="About">About Us </li>
<li class="Team">Our team </li>
<li class="Services">Our Services </li>
<li class="last"> Contact Us </li>
</ul>
</div>
</div>
<div id="headings">
<h1>
Local <span style="color: eb332c; font-weight: bold">Billingham</span>
Solicitors Firm
</h1>
<img src="images/family.jpg" class="family"> <img
src="images/home.jpg" class="home"> <img src="images/care.jpg"
class="care">
<h2>Family Law</h2>
<h3>Buying & Selling Property</h3>
<h4>Wills, Trusts & Probate</h4>
</div>
<div id="content">
<div id="bottomleft">
<h5>Welcome to Cochranes Law Firm</h5>
<p class="para">We are a family High Street Practice, in
Billingham Town Centre, providing an important service to the local
community. we are wills and probate. buying and Selling, as well as
Family law Solicitors in the Billingham and Stockton-on-tees area.
If you would like any further information please feel free to
contact us by phone, email or our contact form.</p>
<p class="lorem">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Sed accumsan, urna sit amet euismod gravida, elit
ante placerat orci, et porttitor nunc velit malesuada tortor. Nam
ac nisl non nunc commodo vestibulum a eu velit. Sed vitae arcu sit
amet nulla ornare fringilla sodales vel justo. Cras hendrerit
libero a mauris gravida lobortis. Donec iaculis tincidunt est, non
rutrum lorem dictum vitae. Curabitur non justo sed est accumsan
posuere id eget justo. Nunc in justo congue, laoreet sem sed,
scelerisque nulla. Fusce in urna suscipit, imperdiet purus et,
ornare nunc. Ut vestibulum consectetur metus, vitae ultrices lacus
placerat aliquet.</p>
</div>
<div id="bottomright">
<h6 class="address">Contact Address</h6>
<p class="pclass">
Cochranes Law Firm <br> 67 Queensway<br> Billingham<br>TS23
2KH
</p>
<h6 class="commonnum">Contact Numbers</h6>
<p class="nums">
Telephone: 01642 266800<br>Fax:01642 366809<br> DX 63160
BILLINGHAM
</p>
<p class="Email">info#cochraneslawfirm.co.uk</p>
<h6 class="contactmail">Contact E-Mail Address</h6>
</div>
</div>
</div>
<div id="footer">
<div id="footer_content">
<p class="foot">
©2014 Cochranes Law Firm | Privacy Policy | Terms and
Conditions<br> Web Design by IT Solutions.
</p>
<img src="images/ware.png"> <img
src="images/accreditations.png" class="accreditations"> <small><br>
<br>Cochranes Law Firm is a Limited Liability registered in
England and Wales number OC343046 and our VAT number is 508 983002.
The registered office is at 67 Queensway, Billingham. TS23 2LU.
Authorised and regulated by the Solicitors Regulation authority
number 547210 under rule 7.07(1) of the Solicitors Code Of Conduct.
We have worldwide professional indemnity insurance through amtrust
Europe Limited, No2 Minster Court, Minicing Lane, LONDON, EC3R 7BB.
Our policy number is P13A298125P and P13B295219P. </small>
</div>
</div>
</body>
</html>
This is my CSS
<style>
* {
font: 12px arial;
padding: 0px;
margin: 0px;
}
#wrapper {
margin: 0 auto;
width: 1130px;
}
#header {
position: relative;
height: 100px;
width: 1130px;
}
#header img {
position: absolute;
top: 10px;
}
#nav {
position: absolute;
right: 0px;
}
#nav ul {
padding: 5px;
border-left: 1px;
text-align: center;
width: 600px;
}
#nav li {
float: left;
display: block;
padding: 8px 15px;
border-right: 2px solid #eb332c;
position: relative;
top: 30px;
}
#nav li a:hover {
color: #c00;
background-color: #fff;
}
#nav li.last {
border-right: none;
}
#nav li a {
text-decoration: none;
font-weight: bold;
font-size: 16px;
color: 000000;
}
#headings {
position: relative;
height: 400px;
width: 835px;
margin: 0px auto;
}
#headings img {
display: inline;
background-color: #ebebeb;
padding: 150px 0px 50px 0px;
}
#content {
width: 750px;
margin: 0px auto;
}
#bottomleft {
float: left;
width: 400px;
}
#bottomright {
float: right;
width: 300px;
position: relative;
left: 18px;
}
#footer {
background-color: #eb322c;
width: 100%;
height: 140px;
clear: both;
}
#footer_content {
width: 1130px;
background-color: eb332c;
margin: 0px auto;
height: 140px;
position: relative;
color: white;
}
h1 {
background-color: #FFFFFF;
text-align: left;
font-size: 30px;
position: absolute;
top: 60px;
left: 0px;
z-index: 100;
width: 340px;
}
h2 {
font-size: 20px;
position: absolute;
bottom: 20px;
}
h3 {
font-size: 20px;
position: absolute;
bottom: 22px;
position: absolute;
right: 343px;
}
h4 {
font-size: 20px;
position: absolute;
bottom: 20px;
position: absolute;
right: 90px;
}
h5 {
font-size: 18px;
border-bottom: 1px solid #eb332c;
position: relative;
right: 45px;
}
p.para {
font-family: arial;
font-size: 12px;
position: relative;
right: 45px;
}
#bottomleft {
position: relative;
}
#bottomright {
position: relative;
background-color: ebebeb;
width: 268px;
height: 220px;
}
h6.address {
border-bottom: 1px solid #eb332c;
width: 230px;
font-size: 16px;
}
h6.contactmail {
border-bottom: 1px solid #eb332c;
width: 230px;
font-size: 16px;
}
h6.commonnum {
border-bottom: 1px solid #eb332c;
width: 230px;
font-size: 16px;
}
p.email {
position: relative;
top: 34px;
}
#search {
position: absolute;
left: 340px;
top: 12px;
width: 320px;
}
#search img {
margin-top: -9px;
margin-left: 5px;
}
img.accreditations {
float: right;
}
small {
font-size: x-small;
}
p.lorem {
position: relative;
right: 45px;
}
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!--
Displays between 768px and 1024px-->
#media only screen and (min-device-width : 768px) and (max-device-width
:1024px) {
#header,#footer_content,#text {
padding: 0px 5px;
width: 50%;
box-sizing: border-box;
}
}
</style>
To be noted that i have used my meta tag inside my style , any help would be appreciated .... Thanks ....
1.) You are using min-device-width and max-device-width which are targeting devices (phones, tablets).
Instead, use min-width and max-width.
This, in conjunction with
<meta name="viewport" content="width=device-width,initial-scale=1"/>
should be sufficient.
2.) You have the <meta> tag inside the <style> tags - it needs to be outside. Try it above the opening <style> tag.
3.) CSS comments are /* comment */ not <!--comment-->.
Change these three things and your code should work.
See this fiddle
your css should be like this
#media only screen and (min-device-width: 400px) and (max-device-width: 1280px) {
/* css for this resolution */
}
#media only screen and (min-device-width: 1281px) and (max-device-width: 1440px) {
/* css for this resolution */
}
You should move the meta-tag outside of your style-tags.
This line:
<meta name="viewport" content="width=device-width,initial-scale=1"/>
Update
Make sure your media query is on a single line:
#media only screen and (min-width : 768px) and (max-width : 1024px) {
}
Demo