I'm building a website with the latest version of Bootstrap, mostly going fine besides a few small gripes.
The major one being my lists. I have two lists which work fine down to 768px wide. After that, they stack even where there is plenty of space for them to appear inline.
It's just an annoying little thing that I want sorted.
Code for my lists:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AGHicks Homepage</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="row-fluid">
<div class="span5">
<ul>
<li><strong>Conservatories</strong></li>
<li><strong>Extensions</strong></li>
<li><strong>Window & Door Refits</strong></li>
<li><strong>Bricklaying</strong></li>
<li><strong>Driveways</strong></li>
<li><strong>Carpentry</strong></li>
<li><strong>Patios</strong></li>
<li><strong>Stonework</strong></li>
</ul>
</div>
<div class="span6 offset1">
<ul>
<li><strong>Plastering</strong></li>
<li><strong>Kitchen & Bathroom Refits</strong></li>
<li><strong>Tiling</strong></li>
<li><strong>Fencing</strong></li>
<li><strong>Fascias</strong></li>
<li><strong>Garages & Carports</strong></li>
<li><strong>Guttering</strong></li>
</ul>
</div>
</div>
</body>
By stacking up do you mean the text is overlapping? If that's the case, you could use media queries to change the size of the typography as the screen size changes.
See the fiddle below and resize (make smaller) the bottom right pane to see the font size change.
Sample code:
#media only screen and (min-width: 1100px) {
body { font-size:120%;}
.wrap {max-width:770px;}
}
#media only screen and (max-width: 800px) {
body { font-size:100%;}
}
#media only screen and (max-width: 400px) {
body { font-size:75%;}
}
Fiddle.
Related
I'm creating a view but my CSS is not displaying except if I put it inside a <style> I already tried using !important but didn't work too, also tried .container-fluid > .row > .d-flex > .out_profile
The class out_profile is not working the CSS inside that class is not displayed. To see the snippet you have to put it on small devices using the responsive
#media (min-width: 576px) {
.container-fluid{
display: none;
}
.container-fluid > .row > .d-flex > .out_profile {
color: #662483 !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" TYPE="text/css">
<title>Document</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav class="d-flex align-items-center justify-content-center navbar navbar-light bg-light col-12">
<div class="out_profile">
X
</div>
<span class="navbar-brand mb-0"><h3 style="color: #662483 !important;">Profile</h3></span>
</nav>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
I took out the display: none and it seems to do exactly what you'd expect -- the text is purple (see example below).
Having said that, I don't think
.container-fluid > .row > .d-flex > .out_profile
is a very elegant css selector. Perhaps you are new to css, but except in very limited circumstances would you need the > selector. In most cases, you would simple write:
.container-fluid .row .d-flex .out_profile
and you can probably even leave a few of the middle elements out, but depends on your situation.
And, as HereticMonkey has pointed out, a !important in css code rarely necessary, so it most likely isn't here either. I left it in below just to show that the only thing I changed was to remove the display: none.
#media (min-width: 576px) {
.container-fluid > .row > .d-flex > .out_profile {
color: #662483 !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" TYPE="text/css">
<title>Document</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav class="d-flex align-items-center justify-content-center navbar navbar-light bg-light col-12">
<div class="out_profile">
X
</div>
<span class="navbar-brand mb-0"><h3 style="color: #662483 !important;">Profile</h3></span>
</nav>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
I would like to include simple media queries to my css file, but they are not working and I've been digging for answers from other questions for too long.
This is the media query I am trying, which I think is most correct:
#media screen and (max-width: 600px) {
body {
background-color: red;
}
}
I have also tried these versions of the code above:
#media screen and (max-width: 600px) {
body {
background-color: red !important;
}
}
#media only screen and (max-width: 600px) {
body {
background-color: red;
}
}
#media (max-width: 600px) {
body {
background-color: red;
}
}
This is my html header with the famous meta tag:
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Tinos&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/bdcb973a27.js"></script>
This is my footer:
<footer class= "accent-color">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</footer>
I feel like I am going insane with this, please help! Thank you!
Max-width media queries mean the style will only show up to the width you define. Any of the media queries you've written should work if your screen is 600px or less. Change max-width to min-width and your red background will display on any screen larger than 600px wide.
*Assuming your HTML has a body tag and your CSS file is in the location you've referenced.
The image in jumbotron has spaces all around. When I reduce the padding in CSS, it is being overridden by Bootstrap CSS.
!important is not working. My CSS file is after the Bootstrap CSS.
Trying out a lot on this!
Please help!
Thanks in advance
HTML PART:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<body>
<header>
--- NAVBAR PART
</header>
<div id="main-content" class="container">
<div class="jumbotron">
<img src="images/jumb1.jpg" alt="Pic1" class="img-responsive center-block">
</div>
</div>
CSS:
.jumbotron {
padding-right: 10px;
padding-left: 10px;
}
If you open browser's element inspector, you can see what exactly overrides your CSS rules and how to avoid it. So, if you see something like this being written in bootstrap.css:
#media screen and (min-width: 768px) {
.jumbotron {
padding: 48px 0;
}
In order to overwrite it, you should use a media query as well. For example:
#media screen and (min-width: 768px) {
.jumbotron {
padding: 20px 10px;
}
I'm trying to follow a Bootstrap tutorial but the first div I'm creating, that should be spanning the entire width of my browser/device, seems to be limited at ~1000 pixels. Any ideas as to why this is?
Here's my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing the Bootstrap 3.0 Grid System</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
.col-xs-12 {
height: 100px;
background-color: blue;
color:white;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">.col-xs-12</div>
</div>
</div>
</body>
</html>
Thanks in advance for any help.
If you're using the latest 3.1, you can use the container-fluid class instead of container like this..
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">.col-xs-12</div>
</div>
</div>
3.1 full width: http://www.bootply.com/116382
For Bootstrap 3.0.x you'd need to use a custom container like this...
.container-full {
margin: 0 auto;
width: 100%;
}
3.0 full width: http://www.bootply.com/107715
The container class has a width specified depending on the media query. Your content is within this div so its width is based upon it.
You can see this in the dev tools in all major browsers, find that element and view the CSS styles/properties.
I'm working with my first responsive website and I'm completely at a halt, I cannot for the life of me figure out how to use these media queries and what not...
Here's what I have...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Responsive Layout Test</title>
<!-- Media Query 1 -->
<link href="mobile.css" rel="stylesheet" type="text/css" media="screen (max-width:480px)" />
</head>
<body>
<!-- Container -->
<div id="container">
<!-- End Container -->
<!-- Header -->
<div id="header">
<!-- Logo -->
<div id="logo">
<img src="images/TalonLogo.png" alt="TalonLogo" />
</div>
<!-- Nav bar -->
<div id="nav">
<ul>
<li>
Test
</li>
<li>
Test
</li>
<li>
test
</li>
</ul>
</div>
</div>
<!-- End header -->
<div id="info">w
</div>
</div>
And the CSS:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
body {
width: 100%
margin: 0;
padding: 0;
}
#container {
width: 480px;
margin-left: auto;
margin-right: auto;
}
#logo {
max-width: 100%;
text-align: center;
}
#nav {
margin-top: 10.6%;
margin-left: 4.6%;
}
Now, I do have a main style sheet obviously, and here's a problem, the whole document (no matter what size) changes the background color... Example:
Main style sheet
body {
background: #fff;
}
but, if i go into my mobile.css
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
body {
background: #000;
}
It all turns black...isn't it meant to be if the screen size is at 480px it will change over?
I'm pretty sure you're missing the viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">