nsdlfefinedieicbe nsdlfefinedieicbe - 4 months ago 10
HTML Question

Remove the empty space present below the image

we can see lot of empty space in link as below the image. I want to hide those empty space.

enter image description here

.main {
margin: 0 auto;
width: 1000px;
}

body, button, input, select, table, textarea {
font-family: 'Roboto Condensed', sans-serif;
color: #636363;
font-size: 14px;
line-height: 1.5;
}


html

<div class="custom_case">
<div class="custom_case_left">
<h1 class="cc1">Custom Cases</h1>
<h2 class="cc2">Make Your Own design</h2>
</div>

<?php


$brandSelect = '<select id="brand_select">';
$brandSelect .= '<option value="">My Brand</option>';

$brandSelect .= '</select>';


echo '<select id="model_select"><option value="">My Model</option></select>';
?>


<div class ="cc3">
<div class ="cc4">
<a href= "><span class ="cc5"> See Cases > </span> </a>
</div>

</div>


I dont want to give so much empty space between image and below footer

please help me for this.

Thanks in advance.

Answer

Figured it out for you!

Your image of the phone cases is what is causing the space issue.

.custom_case_right img {
   /*float:right;*/
   /*bottom:320px;*/
}

That will fix the spacing beneath your image. Now your image is displaying improperly and to fix do this

.custom_case_right {
    float:right;
    margin-top:-310px;
}

These two changes ought to take care of it for you. I tested this out in Chrome.

You'll still need to think about how you want to have your image behave as your viewport shrinks though.