Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Remove whitespace that appeared from hiding an image with a media query

    Hi,

    I've got an image that is removed by the media query:

    Code:
    @media all and (max-width: 800px) {
     img {
       display: none;
     }
    }
    However, the whitespace from where the image would be is still present - how can I make it so the other elements on the page go up to take the place the image would be (ie. make it so there is no whitespace)?

    Thanks!
    Last edited by CSSNoob7; 02-18-2012 at 05:51 PM.

  • #2
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    CSSNoob7,

    Can you post a link to the page so we can look at your code, which includes your html?

    --Kevin

    .
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kevin_M_Schafer View Post
    CSSNoob7,

    Can you post a link to the page so we can look at your code, which includes your html?

    --Kevin

    .
    I don't have it uploaded anywhere public so here it is in code tags:

    HTML (I had to replace all text with 'x's):
    Code:
    <html>
    
    <head>
    	<title>xxxx xxxxx xxxxxxx</title>
    	<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
    </head>
    
    <body>
    	<h1>xxxx xxxxx xxxxx</h1>
    
    	<p>x xxxx xx xxxx xxxxx xxxxxxx, xxxxxxx xx xxxxx.</p>
    	<p>xxxxxx x xxxxx xxxx xxxxx xxx xxx xx xxx xxxx, xxxx xx xxxxx xxx xxx xxxx xxxxx.</p>
    	
    	<br/>
    		
    	<div style="height: 495px; width: 800px;" id="ImageMap_1_1163747142"><map name="ImageMap_1_1163747142" id="ImageMap_1_1163747142">
    	<area href="States/Alabama/index.html" shape="poly" coords="537,310,556,377,518,382,518,395,506,391,504,312" alt="Alabama" title="Alabama" />
    	<area href="States/Alaska/index.html" shape="poly" coords="127,381,128,451,148,457,171,481,171,491,153,491,132,461,98,456,83,473,10,482,55,456,34,431,43,391,60,375,89,365" alt="Alaska" title="Alaska" />
    	<area href="States/Arizona/index.html" shape="poly" coords="110,330,159,362,191,368,204,271,134,258,131,272,123,272,117,290,126,304" alt="Arizona" title="Arizona" />
    	<area href="States/Arkansas/index.html" shape="poly" coords="409,289,408,337,416,350,460,350,472,311,479,295,467,290" alt="Arkansas" title="Arkansas" />
    	<area href="States/California/index.html" shape="poly" coords="23,137,76,151,61,203,117,283,115,289,124,303,112,329,76,325,34,279,11,162" alt="California" title="California" />
    	<area href="States/Colorado/index.html" shape="poly" coords="214,196,308,207,304,276,206,267" alt="Colorado" title="Colorado" />
    	<area href="States/Connecticut/index.html" shape="poly" coords="683,154,683,172,705,163,703,150" alt="Connecticut" title="Connecticut" />
    	<area href="States/Delaware/index.html" shape="poly" coords="663,199,667,225,678,225,674,213" alt="Delaware" title="Delaware" />
    	<area href="States/Florida/index.html" shape="poly" coords="610,378,648,455,632,486,617,487,596,434,574,394,553,405,521,393,521,384,556,379,556,384" alt="Florida" title="Florida" />
    	<area href="States/Georgia/index.html" shape="poly" coords="537,307,572,304,614,348,609,380,557,381" alt="Georgia" title="Georgia" />
    	<area href="States/Hawaii/index.html" shape="poly" coords="183,423,180,461,216,491,283,492,286,465,244,424" alt="Hawaii" title="Hawaii" />
    	<area href="States/Idaho/index.html" shape="poly" coords="141,40,128,89,134,97,121,117,114,159,189,172,197,131,172,128,167,106,158,109,160,88,146,60,152,42" alt="Idaho" title="Idaho" />
    	<area href="States/Illinois/index.html" shape="poly" coords="463,184,450,219,470,243,467,254,486,275,496,274,505,243,501,189,493,174,461,179" alt="Illinois" title="Illinois" />
    	<area href="States/Indiana/index.html" shape="poly" coords="503,191,502,260,527,254,542,237,537,185" alt="Indiana" title="Indiana" />
    	<area href="States/Iowa/index.html" shape="poly" coords="385,164,379,179,391,215,446,215,454,204,461,188,451,165" alt="Iowa" title="Iowa" />
    	<area href="States/Kansas/index.html" shape="poly" coords="307,224,301,278,407,280,407,243,401,238,404,231,393,224" alt="Kansas" title="Kansas" />
    	<area href="States/Kentucky/index.html" shape="poly" coords="485,286,565,275,582,259,569,241,544,234,528,258,502,261" alt="Kentucky" title="Kentucky" />
    	<area href="States/Louisiana/index.html" shape="poly" coords="421,407,426,382,416,367,418,351,461,351,463,363,456,385,479,385,488,396,495,416,456,421" alt="Louisiana" title="Louisiana" />
    	<area href="States/Maine/index.html" shape="poly" coords="698,93,709,124,713,131,748,88,740,74,728,50,708,47" alt="Maine" title="Maine" />
    	<area href="States/Maryland/index.html" shape="poly" coords="611,211,611,219,631,212,649,222,648,229,658,232,666,247,677,224,665,224,662,202" alt="Maryland" title="Maryland" />
    	<area href="States/Massachusetts/index.html" shape="poly" coords="681,142,682,155,708,150,715,156,733,158,733,143,713,134" alt="Massachusetts" title="Massachusetts" />
    	<area href="States/Michigan/index.html" shape="poly" coords="454,95,463,109,497,124,511,187,554,183,562,159,540,107,485,71" alt="Michigan" title="Michigan" />
    	<area href="States/Minnesota/index.html" shape="poly" coords="374,66,380,119,378,123,385,130,385,164,451,164,451,155,428,140,426,125,434,105,464,80,403,72,399,59" alt="Minnesota" title="Minnesota" />
    	<area href="States/Mississippi/index.html" shape="poly" coords="474,314,503,311,506,394,488,395,478,383,456,383,464,356,463,346" alt="Mississippi" title="Mississippi" />
    	<area href="States/Missouri/index.html" shape="poly" coords="392,216,393,224,406,240,407,288,472,287,468,295,476,295,486,279,466,254,469,245,447,218" alt="Missouri" title="Missouri" />
    	<area href="States/Montana/index.html" shape="poly" coords="154,41,149,58,162,87,159,106,167,103,174,127,196,128,198,123,285,132,293,63" alt="Montana" title="Montana" />
    	<area href="States/Nebraska/index.html" shape="poly" coords="284,169,281,204,307,206,307,221,396,224,384,181,355,174" alt="Nebraska" title="Nebraska" />
    	<area href="States/Nevada/index.html" shape="poly" coords="77,152,150,167,130,270,122,270,118,285,61,204" alt="Nevada" title="Nevada" />
    	<area href="States/New Hampshire/index.html" shape="poly" coords="692,95,688,140,711,134,697,91" alt="New Hampshire" title="New Hampshire" />
    	<area href="States/New Jersey/index.html" shape="poly" coords="668,173,667,188,673,193,665,200,675,212,687,187,680,182,680,176" alt="New Jersey" title="New Jersey" />
    	<area href="States/New Mexico/index.html" shape="poly" coords="204,267,290,275,281,364,204,360,202,370,189,366" alt="New Mexico" title="New Mexico" />
    	<area href="States/New York/index.html" shape="poly" coords="607,148,597,171,658,159,667,170,680,174,680,180,687,184,707,169,685,171,682,154,682,139,670,103,648,107,629,139" alt="New York" title="New York" />
    	<area href="States/North Carolina/index.html" shape="poly" coords="589,274,556,305,597,298,624,300,641,313,682,278,670,258" alt="North Carolina" title="North Carolina" />
    	<area href="States/North Dakota/index.html" shape="poly" coords="293,63,288,115,380,120,373,67" alt="North Dakota" title="North Dakota" />
    	<area href="States/Ohio/index.html" shape="poly" coords="545,234,567,238,572,244,596,203,592,178,563,187,553,184,538,186,542,229" alt="Ohio" title="Ohio" />
    	<area href="States/Oklahoma/index.html" shape="poly" coords="290,276,407,281,412,340,359,331,331,324,331,290,288,288" alt="Oklahoma" title="Oklahoma" />
    	<area href="States/Oregon/index.html" shape="poly" coords="50,66,22,121,22,135,113,157,118,114,131,98,125,87,83,87,61,81,60,69" alt="Oregon" title="Oregon" />
    	<area href="States/Pennsylvania/index.html" shape="poly" coords="591,175,597,213,660,200,671,192,665,186,667,171,658,159" alt="Pennsylvania" title="Pennsylvania" />
    	<area href="States/Rhode Island/index.html" shape="poly" coords="708,149,713,156,707,163,702,153" alt="Rhode Island" title="Rhode Island" />
    	<area href="States/South_Carolina/index.html" shape="poly" coords="572,303,616,349,638,314,625,301,597,297" alt="South Carolina" title="South Carolina" />
    	<area href="States/South_Dakota/index.html" shape="poly" coords="289,115,380,120,377,124,383,131,383,163,380,179,355,173,313,169,285,168,286,152,286,134" alt="South Dakota" title="South Dakota" />
    	<area href="States/Tennessee/index.html" shape="poly" coords="475,312,557,305,588,273,480,287" alt="Tennessee" title="Tennessee" />
    	<area href="States/Texas/index.html" shape="poly" coords="289,285,281,366,229,360,255,405,276,418,290,404,307,407,340,467,367,477,367,444,423,408,426,381,416,344,403,337,331,325,330,288" alt="Texas" title="Texas" />
    	<area href="States/Utah/index.html" shape="poly" coords="152,168,190,174,187,194,214,195,204,268,135,256" alt="Utah" title="Utah" />
    	<area href="States/Vermont/index.html" shape="poly" coords="670,103,681,140,688,140,691,100" alt="Vermont" title="Vermont" />
    	<area href="States/Virginia/index.html" shape="poly" coords="582,259,565,276,670,257,658,234,647,230,649,223,638,215,628,215,610,231,606,254" alt="Virginia" title="Virginia" />
    	<area href="States/Washington/index.html" shape="poly" coords="48,63,61,71,61,79,93,85,132,91,140,41,73,21,50,28" alt="Washington" title="Washington" />
    	<area href="States/Washington/index.html" shape="poly" coords="24,32,30,35,30,40,46,43,66,45,70,20,37,10,25,14" alt="Washington" title="Washington" />
    	<area href="States/West Virginia/index.html" shape="poly" coords="637,217,628,216,620,232,611,230,607,248,598,257,584,260,575,248,579,229,592,219,594,201,597,214,612,212,612,219,628,211,635,212" alt="West Virginia" title="West Virginia" />
    	<area href="States/Wisconsin/index.html" shape="poly" coords="436,108,434,117,428,122,428,141,449,154,450,175,458,180,494,175,501,130,495,128,488,119,457,105,449,100" alt="Wisconsin" title="Wisconsin" />
    	<area href="States/Wyoming/index.html" shape="poly" coords="199,123,186,194,281,204,286,131" alt="Wyoming" title="Wyoming" />
    	<area href="States/Delaware/index.html" shape="rect" coords="737,227,795,242" alt="Delaware" title="Delaware" />
    	<area href="States/Maryland/index.html" shape="rect" coords="736,243,794,263" alt="Maryland" title="Maryland" />
    	<area href="States/New Hampshire/index.html" shape="rect" coords="563,28,655,50" alt="New Hampshire" title="New Hampshire" />
    	<area href="States/New Jersey/index.html" shape="rect" coords="723,204,793,224" alt="New Jersey" title="New Jersey" />
    	<area href="States/Massachusetts/index.html" shape="rect" coords="567,73,646,94" alt="Massachusetts" title="Massachusetts" />
    	<area href="States/Connecticut/index.html" shape="rect" coords="727,185,797,203" alt="Connecticut" title="Connecticut" />
    	<area href="States/West Virginia/index.html" shape="rect" coords="716,284,795,301" alt="West Virginia" title="West Virginia" />
    	<area href="States/Vermont/index.html" shape="rect" coords="607,53,651,72" alt="Vermont" title="Vermont" />
    	<area href="States/Rhode Island/index.html" shape="rect" coords="720,163,796,184" alt="Rhode Island" title="Rhode Island" /></map><img alt="" src="800px-Map_of_USA_with_state_names.svg.png" width="800" height="495" usemap="#ImageMap_1_1163747142" />
    	</div>
    	
    	<br/>
    	
    	<div id="states">
    	
    	<div id="states1"><ul>
    	<li><a href="States/Alabama/index.html">Alabama (AL)</a></li>
    	<li><a href="States/Alaska/index.html">Alaska (AK)</a></li>
    	<li><a href="States/Arizona/index.html">Arizona (AZ)</a></li>
    	<li><a href="States/Arkansas/index.html">Arkansas (AR)</a></li>
    	<li><a href="States/California/index.html">California (CA)</a></li>
    	<li><a href="States/Colorado/index.html">Colorado (CO)</a></li>
    	<li><a href="States/Connecticut/index.html">Connecticut (CT)</a></li>
    	<li><a href="States/Delaware/index.html">Delaware (DE)</a></li>
    	<li><a href="States/Florida/index.html">Florida (FL)</a></li>
    	<li><a href="States/Georgia/index.html">Georgia (GA)</a></li>
    	</ul></div>
    	
    	<div id="states2"><ul>
    	<li><a href="States/Hawaii/index.html">Hawaii (HI)</a></li>
    	<li><a href="States/Idaho/index.html">Idaho (ID)</a></li>
    	<li><a href="States/Illinois/index.html">Illinois (IL)</a></li>
    	<li><a href="States/Indiana/index.html">Indiana (IN)</a></li>
    	<li><a href="States/Iowa/index.html">Iowa (IA)</a></li>
    	<li><a href="States/Kansas/index.html">Kansas (KS)</a></li>
    	<li><a href="States/Kentucky/index.html">Kentucky (KY)</a></li>
    	<li><a href="States/Louisiana/index.html">Louisiana (LA)</a></li>
    	<li><a href="States/Maine/index.html">Maine (ME)</a></li>
    	<li><a href="States/Maryland/index.html">Maryland (MD)</a></li>
    	</ul></div>
    	
    	<div id="states3"><ul>
    	<li><a href="States/Massachusetts/index.html">Massachusetts (MA)</a></li>
    	<li><a href="States/Michigan/index.html">Michigan (MI)</a></li>
    	<li><a href="States/Minnesota/index.html">Minnesota (MN)</a></li>
    	<li><a href="States/Mississippi/index.html">Mississippi (MS)</a></li>
    	<li><a href="States/Missouri/index.html">Missouri (MO)</a></li>
    	<li><a href="States/Montana/index.html">Montana (MT)</a></li>
    	<li><a href="States/Nebraska/index.html">Nebraska (NE)</a></li>
    	<li><a href="States/Nevada/index.html">Nevada (NV)</a></li>
    	<li><a href="States/New Hampshire/index.html">New Hampshire (NH)</a></li>
    	<li><a href="States/New Jersey/index.html">New Jersey (NJ)</a></li>
    	</ul></div>
    	
    	<div id="states4"><ul>
    	<li><a href="States/New Mexico/index.html">New Mexico (NM)</a></li>
    	<li><a href="States/New York/index.html">New York (NY)</a></li>
    	<li><a href="States/North Carolina/index.html">North Carolina (NC)</a></li>
    	<li><a href="States/North Dakota/index.html">North Dakota (ND)</a></li>
    	<li><a href="States/Ohio/index.html">Ohio (OH)</a></li>
    	<li><a href="States/Oklahoma/index.html">Oklahoma (OK)</a></li>
    	<li><a href="States/Oregon/index.html">Oregon (OR)</a></li>
    	<li><a href="States/Pennsylvania/index.html">Pennsylvania (PA)</a></li>
    	<li><a href="States/Rhode/index.html">Rhode Island (RI)</a></li>
    	<li><a href="States/South Carolina/index.html">South Carolina (SC)</a></li>
    	</ul></div>
    	
    	<div id="states5"><ul>
    	<li><a href="States/South Dakota/index.html">South Dakota (SD)</a></li>
    	<li><a href="States/Tennessee/index.html">Tennessee (TN)</a></li>
    	<li><a href="States/Texas/index.html">Texas (TX)</a></li>
    	<li><a href="States/Utah/index.html">Utah (UT)</a></li>
    	<li><a href="States/Vermont/index.html">Vermont (VT)</a></li>
    	<li><a href="States/Virginia/index.html">Virginia (VA)</a></li>
    	<li><a href="States/Washington/index.html">Washington (WA)</a></li>
    	<li><a href="States/West Virgina/index.html">West Virgina (WV)</a></li>
    	<li><a href="States/Wisconsin/index.html">Wisconsin (WI)</a></li>
    	<li><a href="States/Wyoming/index.html">Wyoming (WY)</a></li>
    	</ul></div>
    	
    	</div>
    	
    	<br style="clear:both;" />
    	
    	<div id="index-footer"><b><a href="credits.html">Credits</a></b></div>
    </body>
    </html>
    CSS:
    Code:
    body{
    text-align: center;
    white-space:nowrap;
    }
    
    ul, li{
    list-style-type: none;
    text-decoration: none;
    }
    
    a:link{
    color: blue;
    text-decoration: none;
    }
    
    a:visited{
    color: blue;
    text-decoration: none;
    }
    
    a:hover{
    color: red;
    text-decoration: none;
    }
    
    a:active{
    color: red;
    text-decoration: none;
    }
    
    #ImageMap_1_1163747142{
    margin-left:auto; 
    margin-right:auto; 
    }
    
    #index-footer{
    width: 100%;
    }
    
    #index-footer a:link{
    color: red;
    text-decoration: none;
    }
    
    #index-footer a:visited{
    color: red;
    text-decoration: none;
    }
    
    #index-footer a:hover{
    color: blue;
    text-decoration: none;
    }
    
    #index-footer a:active{
    color: blue;
    text-decoration: none;
    }
    
    @media all and (min-width: 700px) {
    #states{width: 800px; margin:0 auto;}
    #states1{float: left; align: center;}
    #states2{float: left; align: center;}
    #states3{float: left; align: center;}
    #states4{float: left; align: center;}
    #states5{float: left; align: center;}
    }
    
    @media all and (max-width: 800px) {
     img {
       display: none;
     }
    }
    Thanks for any help you can offer!

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,219
    Thanks
    23
    Thanked 605 Times in 604 Posts
    You are killing the img but not the div that contains it. That div hasn't width/height so it may be something else that should be removed but this works at getting rid of empty space:
    Code:
    @media all and (max-width: 800px) {
     #ImageMap_1_1163747142 {
       display: none;
     }
    }

  • #5
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    You are killing the img but not the div that contains it. That div hasn't width/height so it may be something else that should be removed but this works at getting rid of empty space:
    Code:
    @media all and (max-width: 800px) {
     #ImageMap_1_1163747142 {
       display: none;
     }
    }
    Thanks, that worked perfectly.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •