CODEWITHSUNDEEP
htmlcssresponsive-design
gmm29
gmm29

Reputation: 1

Website content cutoff & Images not responding Mobile Web design

I have had this problem for a while. Everything I have done to make my images responsive and contain in the parent element fails. My images get cutoff, they do not center, and zoom to smaller screens. Also, my homepage has a left margin space I can't seem to fix. I would like my content centered, and zoomed properly on small screens. My full sized background image is also not filling the whole background on smaller screens. Any help would be appreciated.

<script src="jquery/jquery-3.0.0.min.js"></script>
<script>
$(document).ready(function() {

$('span.nav-btn').on('click', function(){
$('#menu').toggle();
})
$(window).resize(function(){
if ( $(window).width() > 768 ) {
    $('#navigation.showing').removeAttr('nav-btn');
}
});
});//end ready
</script>


</head>

<body>
<div class="bg">
<div id="container" class="homepage">
<div id="header">
<p align="center"><img src="images/headerlogo.png" alt="Lost Tourist Logo" 
width="517" height="269"/> </p>
</div>
<div id="navigation">
<span class="nav-btn"></span>
<ul id="menu" class="showing">
<li> <a href="index.html"><img src="images/menubar.png" alt="menu bar icon" 
width="122" height="118"/></a>
<p align="center">Home</p></li>
<li><a href="beers.html"> <img src="images/menubar.png" alt="menu bar icon" 
width="122" height="118"/></a>
<p align="center">The Brews</p></li>
<li><a href="events.html"> <img src="images/menubar.png" alt="menu bar icon" 
width="122" height="118"/></a>
<p align="center">Events</p></li>
<li> <a href="crew.html"><img src="images/Crew.png" alt="crew" width="122" 
height="118"/></a>
<p align="center">Crew</p></li>
<li> <a href="contact.html"><img src="images/Payphone_menubar.png" 
alt="contact" width="122" height="118"/></a>
<p align="center">Contact</p></li>
</ul>
</div>
</div>

</div>
</body>
</html>

My CSS:

    @charset "utf-8";
body, html {
height: 100%;
margin: 0;

}
.bg {
background-image:url(images/CityScape.jpg);
height:100%;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
#container {
height: 900px;
width: 900px;
position: relative;
padding-bottom: 0px;
margin-top: auto;
margin-right: auto;
margin-bottom: 25px;
margin-left: auto;
}
#navigation ul li {
margin: 25px;
position: relative;
list-style-type: none;
float: left;
overflow: hidden;
}
#navigation ul li p {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
font-weight: bold;
color: #000;
margin: 5px;
}
#content {
position: relative;
overflow: hidden;
clear: both;
width: 900px;
height: auto;
background-color: #09F;
border: thin solid #000;
padding-bottom: 0px;
margin-bottom: 25px;

}
#content table {
background-repeat: repeat;
background-color: #06F;
width:550px;
}




#content table p {
text-align: inherit;
display: table-row;
vertical-align: middle;

}
#content img {
position: relative;


}
#content h1 {
padding: 5px;
}

#navigation {
clear: both;
height: auto;
width: auto;
margin: 0px;
}
#content p {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
margin: 5px;
}
#footer p {
margin: 5px;
}

#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
font-weight: bold;
clear: both;
margin-bottom: 25px;
margin-top: 15px;
border: thin solid #000;
background-color: #09F;
}
#header img {
padding: 25px;
}

My CSS for small screens:

    /*smart phones*/
/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */

and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */

and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) { 

}

/* ----------- Galaxy S5 ----------- */

/* Portrait and Landscape */

and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {

}





body, html {
height: 100%;
marging 0;


}

.bg {
background-image:url(images/CityScape.jpg);
height:100%;
width:100%;
background-repeat:no-repeat;
background-size:cover;

min-width:100%;
}


#container {
width: 100%;
height: 100%;
margin: auto;
padding:5px;
margin:0px;



}
#header img {
position: relative;
height: auto;
max-width: 100%;
max-height:100%;
overflow: hidden;

}
#navigation {
font-size:large;
height: auto;
width:100%;
float:none;
overflow:hidden;
margin:auto;
padding:10px;





}

#navigation ul {
padding: 0;
text-align:center;
}




#menu {
float:none;
margin:auto;
display:none;
width:100%;
max-width:360px;
position:relative;
list-style-type:none;
padding:0;
text-align:center;

}
.nav-btn {
width:100%;
background-color:#09F;
text-align:center;
box-sizing:border-box;
padding:15px 10px;
font-weight:bold;
font-size:large;
text-align:center;
cursor:pointer;
display:block;
height:100%;
}
.nav-btn:after {
content:url(images/mobilemenu.png);

}
    #menu li {
    width:100%;
    font-size:large;
    font-weight:bold;
    background-color:#09F;
    display:inline-block;
    margin:0px;
    border:#000 medium solid;
    float:none;
    overflow:hidden;
    text-align:center;
    vertical-align:top;

}

#menu img {
margin:0px;
padding:0px;
width:90px;
height:90px;
position:relative;

}

#navigation ul li {
margin: 0px;
width: 100%;
position: relative;
float: none;
overflow: hidden;


}

#menu li a {
width:100%;
display:block;

}





#content {
width:100%;
height:100%;
margin:auto;
padding:10px;



}

#content background img {
max-height:100%;
max-width:100%;
}


.socialmedia {
width:30px;
height:30px;
max-width:30px;
max-height:30px;

}




.bigfoot {
width:50px;
height:50px;
max-width:200px;
max-height:200px;
}

.mail {
max-height:110px;
max-width:110px;
}


#content img {

height:auto;
width:100%;
position:relative;
overflow:hidden;
margin:5px;
}

#content table, tbody, th, td, tr {
display:block;
width:100%;
height:auto;
min-height:100%;
min-width:100%;

}



#content table {
border-collapse: collapse;
width:auto
height: auto;
padding: 10px;
position: relative; 
min-width:100%;



}

#content td {

min-width:100%;
min-height:100%;
display:inline-block;
margin:5px;
padding:5px;
position:relative;
width:auto;
}
#content table p {
display:block;
text-align:inherit;
vertical-align:middle;
max-width:100%;
}


#footer {
width:100%;
height:100%;
}

Upvotes: 0

Views: 68

Answers (1)

Dmytro Lishtvan
Dmytro Lishtvan

Reputation: 808

first, add a basic box-sizing property 

*{box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}

2) remove margin from #container

3) remove margin from body

4)for responcive img use img{max-width: 100%;height: auto;}

Upvotes: 2

Related Questions