puddleduckk puddleduckk - 3 years ago 131
HTML Question

Margins and Padding not displaying

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/

Answer Source

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) {

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download