For a simple example, you can check out this link -> here
#contactContainer {
background-color: #999;
float: left;
font-weight:900;
text-align:center;
margin: 0 auto;
}
.contactLeft {
position:relative;
margin:auto;
background-color:lime;
float: left;
margin: 0 0 0 0;
width: 230px;
border-left: thick solid #006;
padding-left: 33px;
height: 100px;
}
.contactRight {
position:relative;
margin:auto;
background-color:yellow;
text-align:right;
float: left;
width: 230px;
border-right: thick solid #006;
padding-right: 33px;
padding-top: 10px;
height: 90px;
}
This year, I am using the twentyfourteen standard theme. My goal is to make two boxes on my contact page responsive so that when the screen is minimized, box B falls under A as shown in the fiddle mockup. While attempting to achieve this, I have tried nesting 2 classes inside of an ID, but ended up using three IDs in the example instead.
After embedding the CSS within the Wordpress page, only the first Div gets recognized.
The purpose of these boxes is to display address information in the left div and contact details in the right. Interestingly, this stacking functionality works perfectly in my example, but not within Wordpress. Any ideas why?