How do I make icons automatically resize itself if i make the browser/screen smaller? Here's a part of my code and pictures of how it looks when displayed on a big screen and a small screen.
<div class="row mt">
<div class="col-md-3 col-sm-3 mb">
<div class="green-panel pn">
<div class="green-header">
<h5>ADD NEW STUDENT</h5>
</div>
<div class="row">
<div class="centered">
<i class="fa fa-user-plus"></i>
</div>
</div>
</div><! --/grey-panel -->
</div><!-- /col-md-4-->
<div class="col-md-3 col-sm-3 mb">
<div class="green-panel pn">
<div class="green-header">
<h5>ADD NEW FACULTY</h5>
</div>
<div class="row">
<div class="centered">
<i class="fa fa-user-plus"></i>
</div>
</div>
</div><! --/grey-panel -->
</div><!-- /col-md-4-->
Large screen:
Small screen:
I'm pretty sure you can just reduce the font-size and the icon will be smaller.
example:
/* For screen width smaller than 768px */
#media screen and (max-width: 768px) {
.fa {
font-size: 18px; // or whatever size you want
}
}
#media (max-width: 768px) {
.centered .fa-user-plus {
font-size: 20px;
}
}
Related
I have a Bootstrap 4 project where whenever I minimize the screen a little bit, the image goes underneath the text column. How can I have it where when I minimize the screen it just clips out the image and doesn't send it to the bottom until the screen reaches a certain width? Right now it sends the image to the bottom way too soon.
<div class="container-xs" style="border:2px solid #cecece;">
<div class="row" style="border:2px solid #1ecbe1;">
<div class="core mx-auto">
<div class="BannerPosition">
<!--Banner Description-->
<p class="BannerText">
<div data-highlightword="Anything">
Anything Anything in Anything
</div>
</p>
<!--Download Badges-->
<img class="appleBadge" src="AppleBadge.jpg">
<img class="googleBadge" src="GoogleBadge.jpg">
</div>
</div>
//PROBLEM IS HERE
<div class="col">
<div class="d-flex flex-nowrap">
<img src="VampireCrew.jpg" style="border:2px solid #cecece;">
</div>
</div>
</div>
You can control when the image goes underneath the text by column by using Bootstrap’s columns with breakpoints.
I’ve modified your code to have two 12 column wide columns at the start (small screen) and then the columns switch to a 4 and an 8 from medium size displays and up. You can then use Bootstrap’s sizing utilities to adjust the margins if you want, and I added some CSS to adjust the text size from smaller screens to larger screens using Bootstrap’s normal breakpoints.
To keep the image fitting, I applied Bootstrap’s img-fluid class.
.orange {
color: #FD9B42;
}
.banner {
font-size: 1.25rem;
}
.apple-badge, .google-badge {
margin-bottom: 1rem;
}
#media (min-width:768px){
.banner {
font-size: 1.5rem;
}
}
#media (min-width:992px) {
.banner {
font-size: 2rem;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-xs" style="border:2px solid #cecece;">
<div class="row" style="border:2px solid #1ecbe1;">
<div class="col-12 col-md-4 mb-5 mb-md-0">
<div class="BannerPosition text-center">
<!--Banner Description-->
<p class="banner orange">Anything</p>
<p class="banner">Anything</p>
<p class="banner">Anything in Anything</p>
<!--Download Badges-->
<img class="apple-badge" alt="Apple badge" src="http://via.placeholder.com/150x50.png?text=Apple">
<img class="google-badge" alt="Google badge" src="http://via.placeholder.com/150x50.png?text=Google">
</div>
</div>
<div class="col-12 col-md-8">
<img class="img-fluid" src="http://via.placeholder.com/1280x720.png?text=vampire" alt="Vampires" style="border:2px solid #cecece;">
</div>
</div>
</div>
I have an issue with my bootstrap layout.
Basically, everything looks OK on larger screens but on smaller screens my footer overlaps the content or the content overlaps the footer!
This is the code I have: https://jsfiddle.net/xpvt214o/639029/
If you make the HTML part larger and smaller and look at the footer, you will see the issue.
This is my full code:
html,body,.col-md-12,.row {
height:100%;
}
.row > div {
height:100%;
}
.YOsidemenu{
padding:0;
font-weight:bold;
background-color: #ffc90e;
padding-top:10px;
max-width:200px;
}
#media only screen and (max-width:768px) {
.YOsidemenu{
display:none;
}
}
/* to make columns visible */
.row .col-sm-2 {
background-color:red;
}
.row .col-sm-10 {
background-color:green;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div style="height:100%; background:#fff;width:100%;padding:0;" class="container">
<div class="col-md-12">
<div class="row">
<div class="col-sm-2">
Sidebar content
</div>
<div class="col-sm-10">
Body content
</div>
</div>
</div>
</div>
<!-- Footer -->
<section id="footer" style="text-align:left; !important">
<div class="container">
<div class="row text-center text-xs-center text-sm-left text-md-left" style="text-align:left; !important">
<div class="col-xs-12 col-sm-4 col-md-4">
<h5>Quick links</h5>
<ul class="list-unstyled quick-links">
<li>Home</li>
<li>Help</li>
<li>Sign-in</li>
<li>affiliate</li>
<li>Promote</li>
</ul>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<h5>Support</h5>
<ul class="list-unstyled quick-links">
<li><i class="fa fa-envelope"></i>support#email.com</li>
<li><i class="fa fa-phone-square"></i>+44 7842227819</li>
<li><i class="fa fa-globe"></i>www.website.com</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-2 text-center text-white">
<p>this site a registered company. </p>
<p class="h6">© All right Reversed.<a class="text-green ml-2" href="https://www.website.com" target="_blank">website</a></p>
</div>
</hr>
</div>
</div>
</section>
<!-- ./Footer -->
Could someone please be kind enough and help me with this issue?
Thanks in advance.
Try removing height: 100% from the div. On mobile the container is 100% high, but because the columns get stacked and each column inherits the height, you have a parent with 100% height and two columns with each 100%, making it 200% of height.
Is this what you are looking for?
html,
body,
.col-md-12,
.row {
height: 100%;
}
.row>div {
height: 100%;
}
.YOsidemenu {
padding: 0;
font-weight: bold;
background-color: #ffc90e;
padding-top: 10px;
max-width: 200px;
}
#media only screen and (max-width:768px) {
.YOsidemenu {
display: none;
}
}
/* to make columns visible */
.row .col-sm-2 {
background-color: red;
}
.row .col-sm-10 {
background-color: green;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div style="height:100%; background:#fff;width:100%;padding:0;" class="container">
<div class="col-md-12">
<div class="row">
<div class="col-sm-2 col-xs-2">
Sidebar content
</div>
<div class="col-sm-10 col-xs-10">
Body content
</div>
</div>
</div>
</div>
<!-- Footer -->
<section id="footer" style="text-align:left; !important">
<div class="container">
<div class="row text-center text-xs-center text-sm-left text-md-left" style="text-align:left; !important">
<div class="col-xs-12 col-sm-4 col-md-4">
<h5>Quick links</h5>
<ul class="list-unstyled quick-links">
<li>Home</li>
<li>Help</li>
<li>Sign-in</li>
<li>affiliate</li>
<li>Promote</li>
</ul>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<h5>Support</h5>
<ul class="list-unstyled quick-links">
<li><i class="fa fa-envelope"></i>support#email.com</li>
<li><i class="fa fa-phone-square"></i>+44 7842227819</li>
<li><i class="fa fa-globe"></i>www.website.com</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-2 text-center text-white">
<p>this site a registered company. </p>
<p class="h6">© All right Reversed.<a class="text-green ml-2" href="https://www.website.com" target="_blank">website</a></p>
</div>
</hr>
</div>
</div>
</section>
<!-- ./Footer -->
Using bootstrap's grid, is it possible to build something responsive like this?
This is what I attempted at so far.
<div class="row">
<div class="panel panel-default profile_header">
<div class="panel-body">
<% for user in #users %>
<div class="col-xs-5 col-md-3">
<%= image_tag(user.avatar.url(:medium), :class => "avatar_profile") %>
</div>
<div class="col-xs-7 col-md-9">
<h2 class="profile_name"><%= user.name %></h2>
<div class="row">
<div class="col-xs-12 col-md-12">
<h2 class="profile_bio"><%= user.bio%></h2>
</div>
</div>
</div>
<% end %>
</div>
</div>
</div>
But for mobile, I want the purple column to pop out and displayed under. The content is too crunched up right now, and breaking it into its own full width box would be much better. Is it possible though?
You didn't ask how cells should look for sm viewport (from 768px till 991px) It should look like for md or like for xs?
Here is a snippet for md and xs viewports
.purple {
background: purple;
}
.orange {
background: orange;
}
.green{
background: green;
}
div[class^="col-"]{
height: 100px;
}
#media screen and (min-width: 992px) {
div.orange {
height: 200px !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-xs-5 orange">
</div>
<div class="col-md-9 col-xs-7 green">
</div>
<div class="col-md-9 col-xs-12 purple">
</div>
</div>
</div>
I have a row of images with title and descriptions, that when the window is downsized to 991px or fewer in width, the list should be vertical, with the title and description to the right of the image, not below it.
<div class="row">
<div class="col-md-2">
<img src="http://placehold.it/150x150">
<h5 class="story-title">Title of the store goes here</h5>
<h6>Description</h6>
</div>
<div class="col-md-2">
<img src="http://placehold.it/150x150">
<h5 class="story-title">Title of the store goes here</h5>
<h6>Description</h6>
</div>
<div class="col-md-2">
<img src="http://placehold.it/150x150">
<h5 class="story-title">Title of the store goes here</h5>
<h6>Description</h6>
</div>
<div class="col-md-2">
<img src="http://placehold.it/150x150">
<h5 class="story-title">Title of the store goes here</h5>
<h6>Description</h6>
</div>
<div class="col-md-2">
<img src="http://placehold.it/150x150">
<h5 class="story-title">Title of the store goes here</h5>
<h6>Description</h6>
</div>
<div class="col-md-2">
<img src="http://placehold.it/150x150">
<h5 class="story-title">Title of the store goes here</h5>
<h6>Description</h6>
</div>
#media (max-width: 991px), (max-height: 460px) {
.col-md-2:hover {
background-color: transparent;
}
.col-md-2 {
display: inline-block;
float: left;
}
}
JSFIDDLE
JSFiddle
You're targeting the wrong elements. Your container doesn't need to be pushed to display: inline-block or floated. The elements within it do:
#media (max-width: 991px), (max-height: 460px) {
.col-md-2:hover{
background-color: transparent;
}
.col-md-2 img {
float: left;
}
.col-md-2 {
overflow: auto;
}
}
I am trying to make a modal popup change it's width so that it matches col-lg-8, col-xs-10
But I just found that modal is fixed width.
So, then I found a css styling that can change the width:
<div class="modal fade" id="mdlBudgets" role="dialog">
<div class="modal-dialog">
<div class="modal-content modal-graph col-lg-8 col-xs-10 well well-sm">
<div class="row">
<div class="col-xs-12">
<span class="glyphicon glyphicon-align-left debit_colour"></span> <strong>Budgets</strong>
</div>
</div>
#if (Model.BarDescriptions.Length == 0)
{
<small><span class="glyphicon glyphicon-info-sign debit_colour"></span> You have no Budgets setup yet.</small>
}
else
{
<div id="budgets"></div>
}
<div class="row">
<div class="col-xs-12 text-right"><span class="glyphicon glyphicon-list"></span> View Budgets</div>
</div>
</div>
</div>
</div>
CSS:
body .modal-graph {
/* new custom width */
width: 700px;
/* must be half of the width, minus scrollbar on the left (30px) */
margin-left: 350px;
}
However, firstly, it's off centre, but my biggest issue is - it's a fixed size. Is there a way to make my modal-graph act like col-lg-8, col-xs-10 ?
As you said .modal-dialog has fixed width so you have to overwrite it. Then to use col-xx-xx class, you have to center them. Something like:
<div class="modal fade" id="mdlBudgets" role="dialog">
<div class="modal-dialog as-container">
<div class="modal-content modal-graph col-lg-8 col-xs-10 well well-sm">
<div class="row">
<div class="col-xs-12">
<span class="glyphicon glyphicon-align-left debit_colour"></span> <strong>Budgets</strong>
</div>
</div>
#if (Model.BarDescriptions.Length == 0)
{
<small><span class="glyphicon glyphicon-info-sign debit_colour"></span> You have no Budgets setup yet.</small>
}
else
{
<div id="budgets"></div>
}
<div class="row">
<div class="col-xs-12 text-right"><span class="glyphicon glyphicon-list"></span> View Budgets</div>
</div>
</div>
</div>
</div>
and css:
#media (min-width: 768px) {
.modal-dialog.as-container {
width: 750px;
}
}
#media (min-width: 992px) {
.modal-dialog.as-container {
width: 970px;
}
}
#media (min-width: 1200px) {
.modal-dialog.as-container {
width: 1170px;
}
}
.modal-dialog.as-container .modal-content {
float: none;
margin: auto;
}