I remade a page using Bootstrap 4 and cannot seem to figure out why the footer background color is not showing. The page is up here
.footer {
width: 100%;
font-size: 1.5rem;
text-align: center;
overflow: visible;
color: #004289;
font-weight: bold;
height: 2rem;
background-color: #CFFEEE;
}
<footer class="footer">
<div class="container">
<div class="text-center">Copyright © <script>document.write(new Date().getFullYear());</script> The Driftwood</div>
</div>
</footer>
I think my brain is exploding over something that should be so simple. Thanks
edit: it appears how I would like in the Run Code Snippet manager below. If you need more code just ask, or view the live page.
this is what I see
in the head section I link to the BS css and to my custom css like this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="dist/css/custom-bs4.css" rel="stylesheet">
Your .container white background is overriding it, since it is a more specific selector than .footer.
To override you can do:
.footer .container {
background-color: #CFFEEE;
}
Your page Your page link has the proper footer background in desktop but in mobile it is white. The reason behind it is , you have defined
#media (min-width: 767px)
custom-bs4.css:395
.footer .container {
background-color: #CFFEEE;
}
So when it comes to mobile size the width get reduce from 767px. SO your this condition does not get satisfied. Instead,it is applying the below style:
.container {
background-color: #fff;
}
So only on your mobile background color is white.
So try using one more #media for mobile screen what color you want for footer or remove the specification for #media min-width for the footer.
Also you can give a try :
.footer .container {
background-color: #CFFEEE;
}
To remove the background of .container:
.container {
background: none;
}
You can also define it as standard:
* {
background: none;
}
I think this is a better option than giving the .container the same background, cause this can help you fix a lot of other problems
In the link to the website it seems like you have a problem with the css:
span.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,51,102)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
.navbar .navbar-toggler:hover span.icon-bar {
background: #004289;
}
If you note, the span.navbar-toggler-icon has an open { but not a closing one. Starting from there - the entire css file is not valid (syntax error since you didn't close that selector).
You can use the following css validator to check your css:
https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fdriftwoodrentals.com%2Fdist%2Fcss%2Fcustom-bs4.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en
I could see background #fff for your innercontainer .container element. that overlaps your footer background color.
.container {
background-color: #fff;
}
line no 10 in custom-bs4.css
You may have to reload your css page... It may have been cached for you ;)
Thanks everyone! I didn't think of adding .footer .container {
background-color: #CFFEEE;
}
It works when the page is full screen but when it's minimized narrower, like mobile, the footer area goes back to white again with the navy text. How can I fix that?
Related
I'm setting up a basic html site. I want to use an image for my background for the landing page. I'm trying to use css inline (I thought this would be easiest...go figure).
In my body tag, I've got the color I want, "darkkhaki". But the property for the background image is not coming up. I have uploaded to my flickr account the image I want, but no go. I did notice in my ST3 window that the closing parenthesis is highlighted red, but I can't find out why.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: darkkhaki;
background-image: https://www.flickr.com/photos/132197683#N04/33747163168/in/dateposted-public("praetorian_punisher.png");
}
h1 {
color: red;
text-align: center;
}
I would like to see the .png file as the background. It's not coming up, though.
Thx for any help.
First, you should do it like this:
body {
background-image: url(...);
}
Second, the url you're trying to use points to HTML page, not to the image itself. Correct url would be https://live.staticflickr.com/65535/33747163168_9f12d3a173_b.jpg.
body {
background-color: darkkhaki;
background-image: url(https://live.staticflickr.com/65535/33747163168_9f12d3a173_b.jpg);
}
h1 {
color: red;
text-align: center;
}
<h1>Hello!</h1>
i have problem with this code and the problem is that before 1200px everything is OK but after re-sizing to 1200px and more ( before width of scroll bar, for example chrome scroll-bar width is 17px ) before 1218px, we will see unwanted horizontal scroll-bar annoying us.
i want to solve this problem but i don't know how.
anybody knows how? so please guide me.
link of my codes and online test:
https://codepen.io/mostafaeslami7/pen/xZePXq?editors=1100
my html:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="header">
<div class="inner-header">header</div>
</div>
<div class="body">body</div>
<div class="footer">
<div class="inner-footer">footer</div>
</div>
</body>
</html>
my css:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
color: white;
font-size: 30px;
text-align: center;
}
body{
background-color: orange;
}
.header{
border-bottom: 1px solid black;
}
.inner-header{
background-color: black;
}
.body{
height: 3000px;
background-color: blue;
}
.footer{
border-top: 1px solid black;
}
.inner-footer{
background-color: green;
}
.header,
.footer{
width: 100%;
height: 100px;
}
.inner-header,
.inner-footer{
height: 100%;
}
.inner-header,
.body,
.inner-footer{
width: 1000px;
margin: 0 auto;
}
#media screen and (min-width: 1200px){
.inner-header,
.body,
.inner-footer{
width: 1200px;
}
}
I know it a old question. but i had like to share this, Hopping someone will find it useful and will save someone's day.
So, There is no quick way, You will have to do some digging and find yourself the element which is causing overflow. Thus, creating unwanted horizontal scroll and pain in your ass. Normally one way would be to just write
body {
overflow-x: hidden;
}
and hope that overflow-x on body will remove that horizontal scroll bar but some times you have to apply overflow:hidden to you main container of the site. Which likely works all the time or most of the times. like,
.main_container {
overflow: hidden;
}
There are some tricks that can help you find those overflow elements such as using below JavaScript script, just open console and execute it there
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
OR you could execute jQuery one,
$.each( $('*'), function() {
if( $(this).width() > $('body').width()) {
console.log("Wide Element: ", $(this), "Width: ", $(this).width());
}
});
or you can use this little jquery snippet. It will logging out the elements directly in console along the elements width, which can help you to easily highlight them on hover in your console (at least in Chrome).
$.each($('*'), function() { if ($(this).width() > $('body').width()) { console.log($(this).get(0)); } }).length;
or if you still can't find that particular element use this below trick,
//Open inspector -> “New Style Rule”:
* {
outline: 1px solid red;
}
You can always add: opacity: 1 !important; visibility: visible !important; if you think you might have a hidden element but usually the above works without extra effort.
Hope it helps someone. Happy digging.
I can't really recommend it but you can use overflow-X:hidden on the body element (not the element with a class of .body*). It's not as though you need to see anything outside of the sides of your container anyway...right?
* you should really not use that name for a class, it's unnecessarily confusing.
#media screen and (min-width: 1200px) {
body {
overflow-X: hidden;
}
.inner-header,
.body,
.inner-footer {
width: 1200px;
}
}
Ideally, you should adjust the design to allow for this though. Different browsers treat the scrollbars differently when it comes to calculating the viewport width.
Codepen Demo
You can change your .inner-footer from width: 1000px to max-width: 1000px; and that will fix the issue.
Here you change code like that. overflow-x: hidden; is hidden the horizontal scroll bar.
body{
background-color: orange;
overflow-x: hidden;
overflow-y: scroll;
}
You could solve this in quite a few ways - one of which is changing your width: 1000px to max-width: 1000px
Another might be simply styling / hiding the scroll bar with some -webkit prefixes. Wouldn't recommend this route for multiple UX reasons but if you want to read up on styling scrollbars - check out this resource.
Lastly you could specifically target the x-axis scroll bar with overflow-x and remove / hide it by setting this to hidden. Again - this method is not the best. How would a user know content is off the page without the scroll bar?
i solve it very easy. if you define min-width media queries = width + scroll-bar width ( for example in chrome is 17px or in opera is 15px but for sure we say 20px ) the problem will be solve.
new link of code:
codepen.io/mostafaeslami7/pen/JGVLdK?editors=1100
So on my small website I have a div that I styled with CSS and as I was testing with various resolutions, the box looked distorted on a small 11 inch screen compared to my 27 inch screen. How can I make my 700 pixel heigth 200 pixel width div look the same size on all monitor sizes
Thanks
HERE IS THE CSS FOR THE DIV:
text-align:center;
border:3px solid black;
padding-bottom:10px;
height:700px; width:200px;
background-color: white; margin-right: 2cm;
margin-top: -19cm;
margin-left: auto;
You'll need to add a meta tag to identify the width and media queries to perform an action when the width is different. It would also be very helpful to add percentage onto your css elements rather than pixels.
HTML code:
<!doctype html>
<meta name="viewport" content="width=device-width"/>
add the meta tag to allow for the page identify the width of the device. see Mozilla's take on this
In this example a query for four different device widths on a <p> tag and background will be applied.
<body>
<h1>Media Queries Examples</h1>
<p>Increase or decrease the size of your window to see the background color change</p>
</body>
The CSS code:
p {
font-family: arial,san-serif;
font-size: 13px;
font-color: black;
}
h1 {
font-size:30px;
}
#media screen and (min-width:761px) {
body {
background-color:white;
}
h1 {
color:red;
}
}
#media screen and (max-width:760px) {
body {
background-color: #333;
}
h1 {
color:red;
}
p {
color: white;
}
}
#media screen and (max-width:480px) {
body {
background-color: #807f83;
}
h1 {
color:white;
}
p {
color: white;
}
}
#media screen and (max-width:360px) {
body {
background-color: #0096d6;
}
h1 {
color:white;
font-size:25px;
}
p {
color: white;
}
}
So using the #media Screen inside your css calls a query for the screen. You can use #Media all for all media devices (see further reading) when the device width reaches within the bounds of that query the css will then be applied to the element in question. see a current example. When you drag the box in the JSFiddle window, it'll change the color of the background and the color of the writing if the query is satisfied. You can apply the same logic to phones, tablets, tv and desktop. Media Queries for Standard Devices - CSS Tricks
This example was provided by an Anonymous user on JSFiddle. It provides a clear example of what is needed for you to ensure that your elements are styled in correspondence to the device in question. I take no credit.
Further Reading
- Microsoft - Media Queries
- #Media Rule - W3C
- Responsive Web Design Wiki
You need to make your website responsive, to do that we use something called media queries which is basically just extra markup in your css syntax.
A great framework to use since you're just starting out with responsive design would be using Bootstrap, it's easily customised to fit the needs of your project.
This should also help give you a better understanding about how fluid grid systems are incorporated into your site.
Hope this helps!
In addition to what Jordan said. This is a great place to learn about media queries and responsiveness: https://www.udacity.com/course/mobile-web-development--cs256
You could do this to resize the page to fit any screen:
body {
background: white;
width: 100%;
}
.content {
width: 100%;
}
.paragraphs {
width: 50%;
margin: 0 auto;
}
<html>
<head>
<title>Example of resizing</title>
</head>
<body>
<div class="content">
<div class="header">
<h1>Header</h1>
</div>
<div class="paragraphs">
<p>#000000 color RGB value is (0,0,0). This hex color code is also a web safe color which is equal to #000. #000000 color name is Black color.
#000000 hex color red value is 0, green value is 0 and the blue value of its RGB is 0. Cylindrical-coordinate representations (also known as HSL) of color #000000 hue: 0.00 , saturation: 0.00 and the lightness value of 000000 is 0.00.
The process color (four color CMYK) of #000000 color hex is 0.00, 0.00, 0.00, 1.00. Web safe color of #000000 is #000000. Color #000000 rgb is equally color.</p>
</div>
</div>
</body>
</html>
Thanks
There are a lot of ways to make a DIV responsive.
The easiest one is to use a framework like bootstrap that does all of the work for you.
The other way is to use #media('max-width: 1024px'){//code...}
this way you will define what will happen in each of the screen resolutions you want.
I am trying to change the body background image for a wordpress site but it is not working.
The HTML class is this:
<body class="home blog" style>
And my CSS is this:
body.home.blog{
background-image:url('http://distilleryimage10.s3.amazonaws.com/0d443332b7bc11e2a7d622000a9e298f_6.jpg');
background-position:right top;
}
Does anyone know what CSS to write?
Also this is a wordpress site so keep that in mind. I don't use wordpress or php very often.
Got it..
You are going to want to remove the following line for your 'blue.css' stylesheet:
body {
background: #232528;
}
The background-image is working.. the background color is just being placed over top of it.
I don't see in your css rule for body.home.blog, only background-image for body without classes. Check your css it's should work
You need to remove the following from your Blue.css file
body {
background: #232528;
}
Or add !important; to your background in the file style.css like so:
body {
font: 0.75em / 1.73em Arial,sans-serif;
color: #6f6f6f;
background: #211D19;
background: url('http://distilleryimage10.s3.amazonaws.com/0d443332b7bc11e2a7d622000a9e298f_6.jpg') !important;
background-position:right top;
}
I'm developing a website that will contain two pages for testimonials. The first two testimonials will be displayed on the home page, then the other three testimonials will be displayed on the original testimonial page.
The original testimonial page background-color is different from the home page. I want to change the text color of the testimonials page. I want to know if is it possible to change the style of the same div but in different page using the CSS attributes and selectors?
This is the class that I want to style differently not on home page but on original .testimonial page
.testimonial-author {
color: #14C2E7;
font-family: 'lobster_1.4regular';
font-size: 35pt;
height: auto;
line-height: 0;
position: absolute;
text-shadow: 1px 1px #000000;
width: 850px;
}
I've tried to use the below method:
.other-pages-background, .testimonial-author{
color: red !important;
}
but it changes on all the pages.
thank you
You'd probably be better off wrapping your testimonials on the homepage in another div, so you can use your CSS to target the testimonials on the homepage, without effecting the testimonials page itself.
For example;
on your homepage you could have
<div class="homepage-testimonials">
<div class="testimonials">
<div class="testimonial-author">John Doe</div>
</div>
</div>
Your CSS;
.homepage-testimonials .testimonial-author { color: red; }
Comma means both selectors get the same styling. Try it without the comma to combine them:
.other-pages-background .testimonial-author{
color: red !important;
}
UPDATE:
Since you are using Wordpress, you can use the following with the appropriate page id:
body.page-id-111 {
color: red !important;
}
There are different ways to achieve this.
Include a additional css file say homepage.css in your homepage along with testimonials.css which will contain css to override the default color.
.testimonial-author {
color: $HOMEPAGE_COLOR;
}
Add some class body tag of your Homepage and overwrite the css property like below.
HTML
<body class="homepage">
CSS
/* Will be applied in Testimonial page */
.testimonial-author {
color: #14C2E7;
font-family: 'lobster_1.4regular';
font-size: 35pt;
height: auto;
line-height: 0;
position: absolute;
text-shadow: 1px 1px #000000;
width: 850px;
}
/* Will be applied in Homepage */
.homepage .testimonial-author {
color: #14C2E7;
}
I prefer the later options.
When you load the page ask php to write in the head AFTER the css load
<script>
.testimonial-author {
color: #color;}
</script>