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;
}
Related
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.
I am trying to learn Bootstrap and wanted to make an exercise by building this site on my own:
https://konect.co.za/
I am seriously having trouble with overriding to Bootstrap and also adding my custom font. To add my custom Google font, I've tried this, but did not work;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
and in css
html{
font-family:"Roboto", "Arial";
font-size:20px;
font-weight:300;}
Here's the img that I cannot style;
<section class="container">
<img class="rounded-circle profile-pic" src="/resources/img/profile_pic.jpg" alt="">
</section>
And the styling;
section img .profile-pic{
margin-left:150px;
}
Try to add in Body
body {
font-family: 'Roboto', sans-serif !important;
}
The html styles will apply to all document but it has very low precedence. it will work only until and unless their is not specified styles inside body. but in your case bootstrap added their own styles in body tag.
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
Thats why your style was not working
You need to put "!important" with your custom CSS style to override any bootstrap styles. Also, CSS will always use the most specific style to style an element so if you put your styles in html{} it will be overridden by p{} h1{} etc. Remember that style sheets are cascading so any styles at the top will be overwritten by styling the same element below.
You need to put "!important" with your custom css style to override bootstrap css.
One more thing if you are using external custom css file than import after bootstrap css file.
See, below example for more.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<style>
html{
font-family:"Roboto", "Arial" !important;
font-size:20px !important;
font-weight:300; !important;
}
.h1-override{
font-size:12px !important;
}
</style>
<body>
<div> testing bootstrap overriding </div>
<h1 class="text-center text-uppercase h1-override">Konect</h1>
<p class="text-center">Technology & Data Management Specialists</p>
<h1 class="text-center text-uppercase">without custom style</h1>
</body>
</html>
I found a post about modifying text size specifically for mobile in a specific div, like this:
#media only screen and (max-width: 480px) {
.news {
font-size: 5px;
}
}
I can't get that to work however for the site I'm messing with. I'd like the font size to be smaller when opened on mobile. While I wonder if I have to set a viewport meta in the html, every time I do this A, it doesn't fix it, B, it totally destroys the balance of my site, clipping tons of information, which I really don't like. So, the only way I'm going to be able to use a viewport right now, is if it doesn't mess with the zoom factor at all. Not sure if that's the issue though.
Really appreciate any help on this. Full code:
css:
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
font-size: 100%;
font-weight: 1;
font-family: 'rationale';
background:black;
}
#newsusa {
position: absolute; /*makes it relative to the html element, (the first
positioned element).*/
width: 100%; /*makes the element 100%, to center it. */
left: 0px;
top: 200px;
}
.news {
color: white;
font-size: 18px;
}
li {
list-style-type: none;
}
#media only screen and (max-width: 480px) {
.news {
font-size: 0.8em;!important;
}
}
#media only screen and (max-width: 280px) {
.news {
font-size: 0.8em;!important;
}
}
xhtml:
<?php include 'global.php';?>
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="en">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mobiletest.css">
<link href='//fonts.googleapis.com
/css?family=Iceland|Rationale|Quantico|VT323|Dorsa' rel='stylesheet'
type='text/css'>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3
/jquery.min.js'></script>
<div id="newsusa">
<h1 class="appear-later">News</h1>
<div class="spacer1">
</div>
<div class="news">
<ul><?php outputValueFromCache('usnews', 'ignore'); ?></ul>
</div>
<div class="spacer2">
</div>
<h1 class="appear-later">Tech</h1>
<div class="spacer1">
</div>
<div class="news">
<ul><?php outputValueFromCache('usatechnews', 'ignore'); ?></ul>
</div>
<div class="spacer2">
</div>
<h1>Business</h1>
<div class="spacer1">
</div>
<div class="news">
<ul><?php outputValueFromCache('usamoneynews', 'ignore'); ?></ul>
</div>
</div>
</html>
You're going to need to add the
<meta name="viewport" content="width=device-width, initial-scale=1">
to your header. If you consider the following code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.page-header{
font-size: 16px;
color: red;
}
#media (max-width: 430px) {
.page-header{
font-size:100px;
color: green;
}
}
</style>
</head>
<body>
<h1 class="page-header">Hello</h1>
</body>
</html>
The media query only works once you have the viewport meta tag defined. I know that's probably not what you want to hear, but I think that's your solution.
I'm a little confused about the specificity here...
.container-fluid, .row, .col-md-12, .jumbotron, h2 {
background-color: blue;
}
.container-fluid.row.col-md-12.jumbotron, h2 {
background-color: blue;
}
Works, but either of these sets of code individually don't work...
HTML is:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<h2>
Hello, world!
</h2>
What is the correct way to override bootstrap CDN(or bootstrap.min)with my local CSS file?
My files are linked like this:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
In your Custom CSS override your class with higher specificity
Take a look at this answer . Creadit #Matt Ball Override a css Class
I'm trying to make a website with Twitter Bootstrap, that is basically a single, vertically centered column on top of a background container div (so I can color / image the background on the edges).
I keep having this issue where I can get the background div to fill the enter screen, but the centered column div sets its height to the size of the content. I want it to always, at least, be as tall as the screen size. I thought min-height would do this, but it does not.
Here's what it looks like right now: (it's just a test page for the layout)
Here is the code for it:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Baileysaurus -- Dinosaurs && Logic in your face!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<LINK href="header.css" rel="stylesheet" type="text/css">
<LINK href="forum.css" rel="stylesheet" type="text/css">
<!-- jQuery (Bootstrap requires jQuery!) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Bootstrap -->
<LINK href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"
media="screen">
<!-- A file of PHP utility functions -->
<?php
include 'functions.php';
?>
</head>
<body>
<!-- Bootstrap -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<div id='background' class='row-fluid'>
<div class='span12'>
<div id='site-column' class='row-fluid span10 offset1 column-wrap'>
<img src="/PipeDog.jpg" alt="ARGUMENT INVALID" />
<hr>
<p>
Put a blog here!
</p>
</div> <!-- END of outermost span12 div -->
</div> <!-- END - "site-column" div -->
</div> <!-- END - "background" div -->
</body>
</html>
CSS
html, body
{
height: 100%;
margin: 0;
}
#background
{
position: absolute;
top:0;
bottom: 0;
min-height: 100%;
min-width: 100%;
background-color: Gainsboro;
}
#site-column
{
top: 0;
bottom: 0;
min-height: 100%;
border-left: 2px solid;
border-right: 2px solid;
background-color: white;
}
.column-wrap
{
overflow: hidden;
}
I'm trying to get the white column in that photo to stretch to the bottom of the screen, at least, even if the content is not that long.
Anyone have any ideas on what I'm missing?
You should also be able to add the following CSS:
.span12 {
height:100%;
}
Try to make your outer <div> to extend to the bottom of the page.
So try this in the css:
.row-fluid
{
position:absolute;
bottom:0;
}
And I'm not sure but you may have to move your
<script src="bootstrap/js/bootstrap.min.js"></script>
line to the <head> part of your page.