Media Query Problem

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
tqmd1
Forum Newbie
Posts: 7
Joined: Sat Nov 09, 2013 1:07 am

Media Query Problem

Post by tqmd1 »

Sir I have these codes in <head> section

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css">
#small_box_r
{
float:left;
width:31.1%;
border:1px solid #ccc;
border-radius:6px;  
padding:0px 0px 0px 0px;
margin:15px 5px 15px 5px;
height:300px;
color:#39F;
font-weight:bold;
text-align:center;
overflow:auto;
background-size:cover;
}
@media (min-width: 400px) and (max-width: 800px){
  #small_box_r {
       min-width: 100%;
           max-width: 100%;
       }
}
</style>
On Computer, small_box_r div look like as follows
aa.png
But ...

On mobile screen,small_box_r div look like as follows
bb.jpg
About half of the div is not visible.

Please help me what I doing wrong and how to display small_box_r div fully visible on mobile?

Thanks
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Media Query Problem

Post by Christopher »

Why are you setting min-width and max-width? Try just setting width:100%.
(#10850)
Post Reply