I have a login page divided into two parts:
First part: col-sm-4,
Second part: col-sm-8.
I have put one image (1600*1000 px) in the first column and another image (1600*1000 px) in second column.
Below these images lie my footer.
Problems:
Problem 1: The screen needs to be scrolled down until it reaches the footer.
Problem 2: The screen needs to be scrolled right because of the image that is put in col-sm-8.
Desired behaviour:
Want that both these images fit the screen in such a way that one doesn’t need to scroll down or right!
Research done before asking: Plenty!
Here is my html code:
<!DOCTYPE html>
<head>
<title>Blah!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css-register/mystyle.css">
<link href="https://fonts.googleapis.com/css?family=Abhaya+Libre" rel="stylesheet">
<script src="https://use.fontawesome.com/6eac8c3c32.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-header">
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-heart" style="color:red;"></span>Chat With Crush</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="expagaincwc.php">Home</a></li>
<li><a href="#">blah</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</div>
</nav>
<!-- nav bar ends here -->
<div class="row">
<div class="col-sm-4">
<img src="../img/fourthimg.jpg" >
</div>
<div class="col-sm-8">
<img src="../img/firstimg.jpg" >
</a>
</div>
</div>
<!-- code for footer -->
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-text pull-left">
<p> Copyright 2017 </p>
</div>
<div class="navbar-text pull-right">
<a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="false"></i></a>
<a href="#"><i class="fa fa-twitter fa-2x" aria-hidden="false"></i></a>
<a href="#"><i class="fa fa-instagram fa-2x" aria-hidden="false"></i></a>
</div>
</div>
</div>
Here is the code for my css:
body{
font-family: 'Abhaya Libre', serif;
}
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
3
Answers
Try add
class="image-responsive"
to your imageswell…not sure if i got this right because the answer sounds too simple to me 🙂
did you try using
max-width:100%;height:auto;
?which i know it’s the same with adding bootstrap class
img-responsive
but just in case that doens’t work, use the CSS i gave you below.let me know if it helps
see fiddle > jsfiddle
code added :
EDIT :well. that’s because of the bootstrap cols. the cols go one after the other under 768px screen width. you can overwrite that behaviour if you want. see fiddle > fiddle EDIT
!!! also if you want to have 1/4 and 3/4 you should use
col-sm-3
andcol-sm-9
. what you are using now, it’s dividing the row into 1/3 + 2/3code added:
Bootstrap has a default way of dealing with columns. IF you setup on mediu (md) it will use the default when scaling down. So if you want something to be the same on all breakpoints you should start with the smallest one
col-xs-4
Don’t forget the class
class="img-responsive"
on the images.