I'm creating a landing page using a responsive grid, on a clean template in Wordpress. I can't get my margins or padding to display on the desktop version, and I can't for the life of me figure out what I've done wrong. They display fine on mobile, but no styling a try and apply to the_content will work.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 2.5%;}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
* {
box-sizing: border-box;
}
.span_12_of_12 {
width: 100%;}
.span_11_of_12 {
width: 91.45%;}
.span_10_of_12 {
width: 82.91%;}
.span_9_of_12 {
width: 74.37%;}
.span_8_of_12 {
width: 65.83%;}
.span_7_of_12 {
width: 57.29%;}
.span_6_of_12 {
width: 48.75%;}
.span_5_of_12 {
width: 40.20%;}
.span_4_of_12 {
width: 31.66%;}
.span_3_of_12 {
width: 23.12%;}
.span_2_of_12 {
width: 14.58%;}
.span_1_of_12 {
width: 6.041%;}
#media only screen and (max-width: 600px) {
.col { margin: 1% 0 1% 0%; }
.span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
width: 100%;
}}
#content-desktop {
display: inline; }
#content-mobile {
display: none; }
#media only screen and (max-width: 600px) {
#content-desktop {
display: none;}
#content-mobile {
display: inline;}
.content {
padding: 2% 5% 2% 5%; }
#rightform {
padding: 2% 5% 2% 5%;
color: white;
</style>
</head>
The HTML:
<div class="section group">
<div class="content">
<div class="col span_6_of_12">
<div id="content-desktop">
Body Content Here
</div>
<div id="content-mobile">
Mobile Body Content Here
</div>
</div>
</div>
<div id="rightform">
<div class="col span_6_of_12">
<a name="taketest"></a>
Here is a form that's also not getting any padding on desktop.
</div>
<div class="section group">
<div class="col span_6_of_12" id="content-mobile">
<div class="content">
Mobile Body Copy Two
</div>
</div>
<div class="section group">
<div class="col span_3_of_12 ctabox" id="content-mobile">
<a href="#taketest">
<img src="http://polaron.com.au/wp-content/uploads/2017/09/CTA-Small.png" style="margin: 0% 5% 0% 5%; max-height:120px; vertical-align:middle" /> </a>
</div> </div>
At less than 600px, everything works fine. Padding around all the text. But on Desktop? Nothing. It says it's there, but my text from the_content is right up against the edge of the window. If I try set a max-width or margins, that won't work either. What (probably very obvious thing!) am I missing?
Here is a link to the HTML and CSS. https://jsfiddle.net/dvrfc0dk/
Your padding will only shows up until 600px width since it's inside the
#media only screen and (max-width: 600px) {. Either add max-width for other format or place your .content {
padding: 2% 5% 2% 5%; }. outside the #media only screen and (max-width: 600px) {
Related
To create a responsive html signature, I tried the infamous <style scoped> tag. As far as I understood there's a conflict with #media queries. Is there a better way to achieve this in a way I can use it in MS Outlook client, preferably both on PC and smartphone?
Here's a reduced version of what I have:
<style scoped>
#containter {
width: 100%;
height: 250px;
}
#firm-contact {
width: 35%;
float: left;
}
#firm-links {
width: 290px;
float: left;
}
#firm-logo {
margin: 2% 4% 1% 4%;
width: 165px;
float: left;
}
/* screenwitdh <= 980px */
#media screen and (max-width: 980px) {
#containter {
height: 580px;
}
#firm-contact {
width: 41%;
}
#firm-links {
width: 41%;
float: right;
}
#firm-logo {
clear: both;
width: auto;
float: none;
}
}
/* screenwitdh <= 600px */
#media screen and (max-width: 600px) {
#containter {
height: 680px;
}
...
}
</style>
<div id="footer">
<div id="display">
<div id="containter">
<div id="firm-contact">
<p>Streer</p>
<p>Place</p>
<p>+tel</p>
</div>
<div id="firm-links">
<p><span>Links</span><</p>
<p><Something</p>
<p>Other</p>
</div>
<div id="firm-logo">
<div width="250" heigth="250">
<img class="img-fluid" src="img/some.png" alt="Logo" width="75%">
</div>
</div>
</div> <!-- containter -->
</div> <!-- display -->
</div> <!-- footer -->
Its required to create a mobile responsive card menu like this using HTML & CSS:
**
Requirement
**
required design
But the outcome was like the below. The text are going all over,cards aren't centered,and changes the position from device to device:
actual outcome
**
My coding
**
<section id="edu-coursecategory-section" class="ed-coursecategory layout-2">
<style>
* {
box-sizing: border-box;
}
/* Float four columns side by side */
.columncat {
float: left;
width: 25%;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Style the counter cards */
.cardcat {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
background-color: #f1f1f1;
width: 80px;
height: 80px;
margin-left: 50%;
font-size: 50%;
}
}
#media screen and (min-width: 780px) {
.ed-coursecategory layout-2 , .isotop-active, .ed-courses layout-2{
display:box;
}
.columncat{
display:none ;
}
}
#media screen and (max-width: 781px) {
.ed-coursecategory layout-2, .isotop-active, .ed-courses layout-2{
display:none;
}
.columncat{
width: auto;
display: box;
margin-bottom: 20px;
}
}
</style>
<div class="row">
<div class="columncat">
<div class="cardcat">
<h3>Technology</h3>
</div>
</div>
<div class="columncat">
<div class="cardcat">
<h3>Science</h3>
</div>
</div>
<div class="columncat">
<div class="cardcat">
<h3>Math</h3>
</div>
</div>
<div class="columncat">
<div class="cardcat">
<h3>Health & Lifestyle</h3>
</div>
</div>
<div class="columncat">
<div class="cardcat">
<h3>Language</h3>
</div>
</div>
</div>
</section>
Appreciate if you could support me to achieve the required design.
I am trying to provide an link to a responsive image. Everything is working properly, but I cannot figure out how to actually get the image to link to site. I have tried adding an line within each div class, but it resizes the images and does not work. I was hoping someone could point me in the right direction. My code is below. Thanks in advance!
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
text-align: center;
}
/*Pictures*/
#picImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#picImg:hover {opacity: 0.7;}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<body>
<style>
.row {display: flex; flex-wrap: wrap; padding: 0 4px;}
.column {flex: 25%; max-width: 25%; padding: 0 4px;}
.column img {margin-top: 4px; vertical-align: middle;}
#media screen and (max-width: 10000px){.column {flex: 25%; max-width: 50%;}
#media screen and (max-width: 1200px){.column {flex: 50%; max-width: 66%;}
#media screen and (max-width: 800px){.column {flex: 100%; max-width: 100%;}
</style>
</body>
<div class="row">
<div class="column">
<img id="picImg" src="LatestSnowfallReports.png" alt="Latest Snowfall/Wind
Reports" text-align="center" style="width:95%; height: 300px image-
rendering:crips-edges;">
</div>
<div class="column">
<img id="picImg" src="SnowfallReportMap.png" alt="Snowfall Report Map" text-
align="center" style="width:95%; height: 300px image-rendering:crips-
edges;">
</div>
<div class="column">
<img id="picImg" src="SnowReport.png" alt="Submit A Report" text-
align="center" style="width:95%; height: 300px image-rendering:crips-
edges;">
</div>
<div class="column">
<img id="picImg" src="WinterClimatology.png" alt="Northern Arizona Winter
Climatology" text-align="center" style="width:95%; height: 300px image-
rendering:crips-edges;">
</div>
</div>
</body>
</html>
Try to do this with the width:50vw; and height:50vh;
Then remove the transition:0.3s; I just changed it to 0.0s. You also forgot your semi colons after the style=height:300pxChange the heights and widths (style="width:95%; height:300px) to
(style="width:100%; height:100%)
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
text-align: center;
}
/*Pictures*/
#picImg {
border-radius: 5px;
cursor: pointer;
transition: 0.0s;
width: 50vw;
height:50vh;
}
#picImg:hover {opacity: 0.7;}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100px;
}
}
<!DOCTYPE html>
<html>
<body>
<style>
.row {display: flex; flex-wrap: wrap; padding: 0 4px;}
.column {flex: 25%; max-width: 25%; padding: 0 4px;}
.column img {margin-top: 4px; vertical-align: middle;}
#media screen and (max-width: 10000px){.column {flex: 25%; max-width: 50%;}
#media screen and (max-width: 1200px){.column {flex: 50%; max-width: 66%;}
#media screen and (max-width: 800px){.column {flex: 100%; max-width: 100%;}
</style>
</body>
<div class="row">
<div class="column">
<img id="picImg" src="LatestSnowfallReports.png" alt="Latest Snowfall/Wind
Reports" text-align="center" style="width:100%; height: 100%; image-
rendering:crips-edges;">
</div>
<div class="column">
<img id="picImg" src="SnowfallReportMap.png" alt="Snowfall Report Map" text-
align="center" style="width:100%; height: 100%; image-rendering:crips-
edges;">
</div>
<div class="column">
<img id="picImg" src="SnowReport.png" alt="Submit A Report" text-
align="center" style="width:100%; height: 100%; image-rendering:crips-
edges;">
</div>
<div class="column">
<img id="picImg" src="WinterClimatology.png" alt="Northern Arizona Winter
Climatology" text-align="center" style="width:100%; height: 100%; image-
rendering:crips-edges;">
</div>
</div>
</body>
</html>
I want to create a container so that i have a simple layout with a nav bar at the top and a nav bar on the left side which is about 150px. As the screen gets smaller though, i want the left nav to entirely disappear and have the following occur:
1) Replace the 150px (icon + text) nav bar with just an icon nav bar on the left
or 2) remove/hide the nav bar entirely and have a burger bar in the top nav which will expand a vertical menu down. This would be the exact same menu as the one before on the left except it would not be displayed from the top nav rather than the side.
What i've done so fat?
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Awesome Bootstrap 3 Sidebar Navigation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
/* MORE THAN 75 */
body {
background-color: skyBlue;
}
/* LESS THAN 75 */
#media (max-width: 74.9em) {
body {
background-color: pink;
}
}
/* LESS THAN 62 */
#media (max-width: 61.9em) {
body {
background-color: blue;
}
}
/* LESS THAN 48 */
#media (max-width: 47.9em) {
body {
background-color: green;
}
}
/* LESS THAN 34 */
#media (max-width: 33.9em) {
body {
background-color: red;
}
}
.navbar-outer {
width: 600px;
}
.aav {
background-color: black;
color: white;
border-style: solid;
border-color: red;
}
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row aav">
<div class="col-xs-6 col-md-2" style="width:100px; border:solid; color:white;">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-4</div>
</div>
I'm trying to create the left nav and the content pane. I'm thinking too much of java i guess because i'm not sure how to go about the implementation. Any feedback is appreciated.
I'm stuck because i don't want the left bar to scale, i want it to be a fixed width until the screen gets too small for it.
This is a complicated question, but the gist of it is that you can set a container (or just set styles on the body element itself) to hold your nav, sidebar, and general content area, and then modify their widths and heights with media queries.
So given your page is 100vw across, for example, your sidebar could be 150px wide as you mentioned, and that would leave 100vw - 150px for the width of the main content area. You'd float them next to each other.
main {
width: 100vw;
}
aside {
float: left;
width: 150px;
}
section {
float: left;
width: calc(100% - 150px);
}
When you want the sidebar to narrow, you can adjust the width of the sidebar and the calc expression for the main content area. (You'd also hide the labels next to your icons.)
#media all and (max-width: 900px) {
aside {
width: 40px;
}
section {
width: calc(100% - 40px);
}
}
When you get to mobile view, your sidebar can simply become 100% width of the screen, and then you'll need additional CSS to change the display of the icons and whatnot.
#media all and (max-width: 600px) {
aside {
width: 100%;
}
section {
width: 100%;
}
}
That's the general principle you'll want to work with, but a lot of the other CSS will probably depend exactly on your site. Below is an example.
main {
width: 100vw;
height: 100vh;
}
nav {
background-color: #5BA1CB;
height: 80px;
}
nav .title {
width: 130px;
height: 60px;
margin-top: 10px;
margin-left: 10px;
background-color: rgba(255, 255, 255, 0.2);
float: left;
}
nav .burger {
float: left;
margin-left: 20px;
height: 100%;
}
nav .burger img {
margin-top: 10px;
}
aside {
background-color: #144360;
width: 150px;
height: calc(100% - 80px);
float: left;
}
aside .icon {
margin-left: 5px;
margin-top: 50px;
}
aside .icon:first-child {
margin-top: 100px;
}
aside .icon span,
aside .icon img {
vertical-align: middle;
display: inline-block;
}
section {
float: left;
width: calc(100% - 150px);
height: 100%;
background-color: #DAEAF4;
}
#media all and (max-width: 900px) and (min-width: 601px) {
aside {
width: 40px;
}
aside .icon span {
display: none;
}
section {
width: calc(100% - 40px);
}
}
#media all and (max-width: 600px) {
aside {
width: 100%;
height: 150px;
}
aside .icon {
float: left;
width: 100px;
}
aside .icon:first-child {
margin-top: 50px;
}
section {
width: 100%;
}
}
<main>
<nav>
<div class="title"><span>Title Area</span></div>
<div class="burger">
<img src="http://placehold.it/60x60?text=BURGER" />
</div>
</nav>
<aside>
<div class="icon">
<img src="http://placehold.it/25x25" />
<span>Label</span>
</div>
<div class="icon">
<img src="http://placehold.it/25x25" />
<span>Label</span>
</div>
<div class="icon">
<img src="http://placehold.it/25x25" />
<span>Label</span>
</div>
</aside>
<section>
<h1>Body</h1>
</section>
</main>
I've been searching online for an answer and can't really find a solution. I'm trying to display an image and then directly below have a colored block (that is attached to the bottom of the image) for a caption on the image.
Below are my CSS code and HTML for the page.
I have this css code:
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 5.0%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF FOUR */
.span_4_of_4 {
width: 100%;
}
.span_3_of_4 {
width: 73.75%;
}
.span_2_of_4 {
width: 47.5%;
}
.span_1_of_4 {
width: 21.25%;
}
/* GO FULL WIDTH BELOW 480 PIXELS */
#media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}
/***** HTML CODE: *****/
<div class="section group">
<div class="col span_1_of_4">
<img src="XXX" style="border-width: 1px; border-style: solid; width: 190px; height: 255px;" /></a>
<br />
TEXT HERE
</div>
</div>
.img-wrapper {
background: #888;
border-width: 1px;
border-style: solid;
}
.img-wrapper img {
width: 100%;
padding-bottom: 50px;
}
<div class="section group">
<div class="col span_1_of_4">
<div class="img-wrapper">
<img src="xxx">
<br>
TEXT HERE
</div>
</div>
</div>
Wrap the image and the caption in the same div, and give that div a background color.
Here's a simple example:
<div id="wrapper">
<img src="XXX" style="width: 190px; height: 255px;" />
Text
</div>
#wrapper {
background: #ccc;
display: inline-block;
}
#wrapper a {
text-align: center;
display: block;
padding: 10px;
}
http://jsfiddle.net/eo9wfx5c/1/