Acadiandreamer Acadiandreamer - 1 year ago 33
CSS Question

CSS responsive query

I'm working on a project, I have the layout how my client wants it. I'm rekatively new to responsive layouts. In mobile devices with width 321px Im struggling to get right column to expand over the full width of the screen/device.

I understand this is likely a duplicate question, below is a fiddle but if anyone can take a look and either offer some adive or point me to previous answers I'd be grateful.



@media only screen
and (max-width : 320px) {

.container {
width: 321px ! important;
}

#columnright {
display: block ! important;
float: non ! important;
width: 100% ! important;
clear: right;
margin-left; 10%;
}



}


body {
background-image: url(images/khBG.gif);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
margin: 0;
padding: 0;
font-family: "Century Gothic", Verdana, sans-serif;
color: black;
border: 1px solid black;
}

#banner {
padding-right: 5%;
opacity: 0.7234;
background-color: #ffffff;
border-bottom: 1px solid black;
}

#banner ul {
float: right;
font-size: 0.70em
}

#banner ul li {
display: block;
float: left
}

#columnleft {
padding-left: 1%;
background-color: #ffffff;
border-bottom: 1px solid black;
opacity: 0.7234;
float: left;
width: 15%;
margin-left: 0%;
padding-top: 1%;
}

#columnright {
padding-left: 1%;
background-color: #ffffff;
border-bottom: 1px solid black;
opacity: 0.7234;
padding-top: 2%;
width: 50%;
float: right;
overflow: hidden;
margin-right: 30%;
}

#columnright ul {
overflow: hidden;
}

#footer {
clear: both;
background-color: #ffffff;
filter: alpha(opacity=60);
opacity: 0.7234;
padding-bottom: 1em;
padding-left: 200px;
font-size: .60em;
}

#pic-gallery {
margin-left:17.5%;
width: 400px;
height: 400px;
border: 1px solid black;
align-items: center;
display:flex;
}

#pic-ver {
padding-top: 50px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 100px;
}

#pic-hor {
padding-top: 100px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 50px;
}

#myGallery {
position: relative;
width: 320px;
/* Set your image width */
height: 267px;
/* Set your image height */
}

#myGallery img {
display: none;
position: absolute;
top: 0;
left: 0;
}

#myGallery img.active {
display: block;
}

.titlegrp {

}

.title {
float: right;
margin-right: 17.5%;
margin-top: 7.5%;
}

.subtitle {
font-family: "Segoe Script", Segoe, sans-serif;
font-size: 1.05em;
}

.h1 {
font-family: "Segoe Script", Segoe, sans-serif;
font-size: .9em;
}

.imgleft {
float: left;
margin-right: 5px;
}

.imgright {
float: right;
margin-right: 60px;
}

.contentpara {
padding-left: 15px;
}

.sidelinks {
font-family: "Century Gothic", Verdana, sans-serif;
}

.sidelinks a:link {
text-decoration: none;
color: black;
}

.sidelinks a:hover {
text-decoration: none;
font-family: "Segoe Script", Segoe, sans-serif;
}

.sidelinks a:visited {
text-decoration: none;
color: blue;
}

.tablecont {
padding-left: 15px;
}

div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
-webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 4s;
}

div.img:hover {
border: 1px solid #777;
}

div.img {
width: 100%;
height: auto;

}

div.desc {
padding: 15px;
text-align: center;
}

.image-wrapper {
margin: auto;
align-items: center;
justify-content: center;
}

.gal-butt {
font-size: 2.5em;
margin: auto;
}

<!doctype html>

<html lang="en">

<header>
<meta charset="utf-8">

<title>Katie's House - West Hull Based Childminder</title>
<link rel="ICON" href="images/KH_logo.ico" type="image/ico" />
<meta name="description" content="">
<meta name="author" content="Brian Johnson">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="KHjscript.js"></script>
<link rel="stylesheet" href="kHIndex.css">

</header>

<body>
<div class="container">
<div id="banner">
<ul class="none">
<li class="nav"> <a href="https://www.facebook.com/KatieSummersChildminder/" target="_blank">
<img border="0" alt="Contact us on Facebook" src="images/fBook_Icon_Black.gif" width="30" height="30"></a></li>
<li class="nav"> <a href="mailto:[email protected]">
<img border="0" alt="Contact via Email" src="images/email_Icon_Black.gif" width="30" height="30"></a></li>
<li class="field"><input type="text" title="Search" text="Search" /></li>
</ul>
<div class="titlegrp">
<img class="title" src="images/kH_title.png" alt="Katies House Title">
<img src="images/KH_logo.jpg" alt="Katies House Logo">
</div>
<div style="clear: both;"></div>
</div>
<div id="columnleft">
<div class="subtitle"><p><u>Site Navigation</u></p></div>
<div class="sidelinks">
<a href="Index.htm">Home</a>
<br>
<a href="About.htm">About</a>
<br>
<a href="Sample_Day.htm">Sample Day</a>
<br>
<a href="Gallery.htm">Gallery</a>
<br>
<a href="Testimonials.htm">Testimonials</a>
<br>
<a href="Enquiries.htm">Enquiries</a>
<br>
</div>
</div>
<div id="columnright">
<div class="subtitle"><u>Katie's House Services</u></div>
<div class="imgleft"><img border="1" alt="Katie and Mindees" src="images/katie_intro_page.jpg"></a>
</div>
<p>What Katie's house can offer you</p>

<ul>
<li>Early years child care 0-5 years</li>
<li>Funded places for eligible 2,3 and 4 year olds at 15 hours per week free</li>
<li>Long term and short term care</li>
<li>Full time and part time places</li>
<li>Professional and affordable</li>
</ul>
<hr>
<p>My Qualifications</p>

<p>I attend training regularly and have qualifications in:</p>

<ul>
<li>Paediatric First Aid</li>
<li>Child Protection</li>
<li>Special Educational Needs</li>
<li>Food Hygiene</li>
<li>Health and Safety</li>
<li>Equal Opportunities</li>
<li>Home based Childcare</li>
<li>Working with two year olds</li>
<li>schemas</li>
<li>NVQ3 Children's care, Learning and Development</li>
<li>Open University - Understanding Autism</li>
</ul>

<br>
<p>Click below for a little information on Childminding</p>
<a href="http://www.pacey.org.uk/parents/types_of_childcare/registered_childminders.aspx" target="_blank">Pacey's Info on Registered Childminders</a>
<div style="clear: both;"></div>
<br>
</div>

<div id="footer">
<p>Brian Johnson
<br>&copy; Copyright 2016. All Rights Reserved</p>
</div>
</div>
</body>

</html>





https://jsfiddle.net/aw3eb1oa/

Answer Source

You were really close - just need to put your media query at the bottom of the CSS so it can override the other styles. Then add a width:100%; and margin-left: 0;

#columnleft, #columnright {
  float: none;
  width: 100%;
}

#columnright {
  display: block ! important;
  clear: right; 
  margin-left: 0;
}   

Updated: Fiddle

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