Come to a strange problem, when I use css to set the button, I can set its color, font-size, background, but cannot set its border. The following is HTML and CSS code.
.btn-general {
border-width: 2px !important;
border-style: solid !important;
border-radius: 0;
padding: 12px 26px 12px 26px;
font-size: 16px;
font-weight: 400;
text-transform: uppercase !important;
}
.btn-white {
border-color: #fff;
color: #fff;
}
<section id="home">
<div id="home-cover">
<div id="home-content-box">
<div id="home-content-box-inner">
<div id="home-heading">
<h3>Watch Out<br>The Modern Responsive Website!</h3>
</div>
<div id="home-btn">
<a type="button" class="btn btn-lg btn-general btn-white" href="#work" title="View Our Work">View Our Work</a>
</div>
</div>
</div>
</div>
</section>
Put your css in Style Tag
<style>
.btn-general{
border-width:2px !important;
border-style: solid !important;
border-radius: 0;
padding: 12px 26px 12px 26px;
font-size: 16px;
font-weight: 400;
text-transform: uppercase !important;
}
.btn-white{
border-color: #fff;
color: #fff;
}
</style>
always put CSS on the top of html
<div id="home-cover">
<div id="home-content-box">
<div id="home-content-box-inner">
<div id="home-heading">
<h3>Watch Out<br>The Modern Responsive Website!</h3>
</div>
<div id="home-btn">
<a type="button" class="btn btn-lg btn-general btn-white" href="#work" title="View Our Work">View Our Work</a>
</div>
</div>
</div>
</div>
</section>
You have set your border-color to white that's why you could not see that. I have changed it to darker color so that you can see it.
.btn-general{
border-width:2px !important;
border-style: solid !important;
border-color: #ff3333;
border-radius: 0;
padding: 12px 26px 12px 26px;
font-size: 16px;
font-weight: 400;
text-transform: uppercase !important;
}
.btn-white{
color: #222;
border-color: #222;
}
<section id="home">
<div id="home-cover">
<div id="home-content-box">
<div id="home-content-box-inner">
<div id="home-heading">
<h3>Watch Out<br>The Modern Responsive Website!</h3>
</div>
<div id="home-btn">
<a type="button" class="btn btn-lg btn-general btn-white" href="#work" title="View Our Work">View Our Work</a>
</div>
</div>
</div>
</div>
</section>
Hope this helps
Related
I have small problem. I am beginner web developer. I make project in Bootstrap 4.
I have this code:
<section class="front-banners">
<div class="container">
<div class="row">
<div class="col-12 pb-4 mb-md-1">
<div class="card bg-dark text-white">
<img class="card-img front-banner-img" src="/img/banner.jpg" alt="Kuchnie">
<a href="/produkty">
<div class="card-img-overlay front-banner-overlay">
<h5 class="card-title">Title </h5>
<img src="/img/arrow-front.png">
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
<p>Poznaj ofertę</p>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
and my css:
.front-banner-overlay {
background-color: rgb(255, 173, 51);
width: 180px;
height: 180px;
margin: 20px;
border-radius: 4px;
}
.front-banner-overlay h5 {
font-family: Inter;
font-style: normal;
font-weight: 500;
font-size: 36px;
color: #1A1A1A;
}
.front-banner-overlay p {
font-family: Inter;
font-style: normal;
font-size: 13px;
line-height: 16px;
position: absolute;
bottom: 0;
color: #1A1A1A;
}
.front-banner-overlay:hover {
color: #1A1A1A;
}
I would like to add for:
<img class="card-img front-banner-img" src="/img/banner.jpg" alt="">
After hovering the cursor over the photos, I would like the photo to be black and white.
How can I do this?
This following css will work for you:
.card-img:hover{
filter: grayscale(100%);
}
I am making an news blog. I have created my main article cards. The cards have an image to the left of the card, and with the card having the main content like the title, brief description, author and date.
Everything works when the browser is maximized (I'm on a 13 inch laptop). As I start resizing my browser and making it smaller, everything starts to kind of break. The image does not take up the full width, and has a lot of white space to the right of it.
I tried giving the image width of 100%, but it does not seem to fix the problem. I am not sure what is wrong and why this is happening. This is only happening to these article cards. Everything else on the homepage works correctly even on smaller sized screens.
If you have some time, can you explain what is happening, and how to solve this problem? Please and thank you.
Screenshots:
Large+ Screens
As I start resizing the browser window and making it smaller it does this:
And finally the phone sized screens:
HTML
<div class="card card-article">
<div class="row no-gutters right-shadow-games">
<div class="col-auto">
<img alt="" class="img-fluid" src="//placehold.it/200x200"> <a class="article-tag games" href="#">Games</a>
</div>
<div class="col">
<div class="card-block">
<div class="row">
<div class="col-md-12">
<h4 class="card-title">How Did van Gogh’s Turbulent Mind Depict One of the Most Complex Concepts in Physics?</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="card-description">Pick the yellow peach that looks like a sunset with its red, orange, and pink coat skin, peel it off with your teeth. Sink them into unripened...</p>
</div>
</div>
<div class="row">
<div class="col-md-9">
<p class="card-author">Author on Sep 29, 2017</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.card-article {
margin-top: 2px;
margin-bottom: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.card-article .card-title{
margin-top: 15px;
margin-left: 15px;
margin-right: 10px;
font-size: 18px;
}
.card-article .card-author{
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 12px;
line-height: 1.4;
}
.card-article .card-title a{
color: black;
font-weight: 600;
}
.card-article .card-description{
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 14px;
line-height: 1.4;
}
For give the messy CSS I could definitely clean it up a little bit.
Here, the image will resized to 100% width at 640px media width. I think it is better when you could change the image size to something bigger (as per 100% width point) to get maximum picture clarity.
.card-article {
margin-top: 2px;
margin-bottom: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.card-article .card-title {
margin-top: 15px;
margin-left: 15px;
margin-right: 10px;
font-size: 18px;
}
.card-article .card-author {
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 12px;
line-height: 1.4;
}
.card-article .card-title a {
color: black;
font-weight: 600;
}
.card-article .card-description {
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 14px;
line-height: 1.4;
}
.article-tag.games {
position: absolute;
left: 10px;
top: 10px;
background: red;
padding: 2px 5px;
color: white;
border-radius: 4px;
}
.col-auto img {
max-width:200px;
}
#media (max-width: 640px) {
.col-auto {
width:100%;
max-width:100% !important;
}
.col-auto img {
width:100%;
max-width:100%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<div class="card card-article">
<div class="row no-gutters right-shadow-games">
<div class="col-auto">
<img alt="" class="img-fluid" src="//placehold.it/640x640"> <a class="article-tag games" href="#">Games</a>
</div>
<div class="col">
<div class="card-block">
<div class="row">
<div class="col-md-12">
<h4 class="card-title">How Did van Gogh’s Turbulent Mind Depict One of the Most Complex Concepts in Physics?</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="card-description">Pick the yellow peach that looks like a sunset with its red, orange, and pink coat skin, peel it off with your teeth. Sink them into unripened...</p>
</div>
</div>
<div class="row">
<div class="col-md-9">
<p class="card-author">Author on Sep 29, 2017</p>
</div>
</div>
</div>
</div>
</div>
</div>
What's happening is your image is exactly 200x200px, so it can't stretch when your page changes shape. You could find a different image (I don't recommend this - just putting it out there), or you could try adding a media query for another stylesheet on variable width devices, then resetting the height/width on those.
Use col-md-4 to image wrap div instead col-auto (see fidlle:https://jsfiddle.net/yemd0qnt/3/)
.card-article {
margin-top: 2px;
margin-bottom: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.card-article .card-title{
margin-top: 15px;
margin-left: 15px;
margin-right: 10px;
font-size: 18px;
}
.card-article .card-author{
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 12px;
line-height: 1.4;
}
.card-article .card-title a{
color: black;
font-weight: 600;
}
.card-article .card-description{
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 14px;
line-height: 1.4;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="card card-article">
<div class="row no-gutters right-shadow-games">
<div class="col-md-4">
<img alt="" class="img-fluid" src="//placehold.it/200x200"> <a class="article-tag games" href="#">Games</a>
</div>
<div class="col">
<div class="card-block">
<div class="row">
<div class="col-md-12">
<h4 class="card-title">How Did van Gogh’s Turbulent Mind Depict One of the Most Complex Concepts in Physics?</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="card-description">Pick the yellow peach that looks like a sunset with its red, orange, and pink coat skin, peel it off with your teeth. Sink them into unripened...</p>
</div>
</div>
<div class="row">
<div class="col-md-9">
<p class="card-author">Author on Sep 29, 2017</p>
</div>
</div>
</div>
</div>
</div>
</div>
You can 100% image width with use Media Queries for mobile.
#media (max-width: 575px) {
.img-fluid{width:100%;}
}
First look at the picture:
Like you see my center of page i mean this content with form on small resolution get over the navbar. This content is centered verticaly and horizontal by flex.
here is code and what i try:
html`
<nav>
<div class='row header-inner'>
<div class='col-md-10 col-lg-10 col-lg-offset-2 col-md-offset-2 col-sm-offset-1 col-sm-11 col-xs-12'>
<div class='row logo-inner'>
<img src="assets\static\Logo.png">
</div>
<div class='row menu-inner'>
<a class='menu-item' routerLink="/aboutUs" routerLinkActive="active">about us</a>
<a class='menu-item' routerLink="/skiCams" routerLinkActive="active">skicams</a>
<a class='menu-item' routerLink="/contactUs" routerLinkActive="active">contact</a>
</div>
</div>
</div>
</nav>
<div class='row content-inner'>
<div class='col-md-8 col-lg-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-1 col-sm-10 col-xs-12'>
<router-outlet></router-outlet>
</div>
</div>
<footer>
<div class='row center-block'>
<div class='col-md-offset-5 col-lg-offset-5 col-md-2 col-lg-2 col-sm-offset-5 col-sm-2 col-xs-offset-3 col-xs-6 footer-content'>
Powered by PGS
</div>
</div>
</footer>`
and css
footer {
border-top: 1px solid #40637e;
background-color: #282828;
position: fixed;
left: 0;
bottom: 0;
height: 110px;
width: 100%;
overflow:hidden;
}
.footer-content{
color :#959595;
border-top :1px solid #959595;
text-align: center;
margin-top:30px;
padding: 20px;
font-size: 10px;
}
.logo-inner{
margin: 35px 0px 35px 0px;
}
.header-inner{
border-bottom:1px solid #dbdbdb;
padding-bottom: 13px;
margin: 0;
}
.menu-inner{
margin:0px;
}
.menu-item{
margin-right: 40px;
padding-bottom: 15px;
font-size: 14px;
text-transform: uppercase;
font-weight: bold;
color:#545454;
}
.active{
border-bottom:1px solid #ef6716;
color: #ef6716;
}
a:hover, a:focus {
color: #ef6716;
text-decoration: none;
}
.content-inner{
background-color:#f8f8f8;
margin: 0;
/*margin-bottom:200px;*/
}
#media(max-width : 768px){
.menu-item{
margin-right:30px;
padding-bottom: 14px;
font-size: 14px;
text-transform: uppercase;
}
.menu-inner{
margin:0px;
text-align: center;
}
.logo-inner{
margin: 35px 0px 35px 0px;
text-align: center;
}
}
could you help my do something like this when the height is smaller the page start scrolling ?
It looks like you're missing your flexbox code in your question. Without seeing it all, I'd suggest trying to remove flexbox in the smaller breakpoints and just using display: block; and making sure your <div class='row content-inner'> element is statically positioned (position: static;).
I'm pretty noob in html and css since I just started. I'm trying to implement something in a creation but I don't know to delete the auto enters in the title.
#import url(https://fonts.googleapis.com/css?family=Fjalla+One);
html{
height: 100%;
}
body{
font-family: 'Fjalla One', sans-serif;
background: linear-gradient(to bottom, #405166 0%, #656f6f 100%);
}
.container{
margin: auto;
}
h1{
text-transform: uppercase;
font-size: 42px;
line-height: 47px;
letter-spacing: 2px;
text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;
text-align: center;
}
.title{
transform: translateX(-50%) rotate(-5deg);
display: block;
margin-left:50%;
}
<body>
<section class="container">
<h1>
<br />
<span class="title" style="color:#e55643;">Burger</span>
<span class="title" style="color:#2b9f5e;">school</span>
<span class="title" style="color:#f1c83c;">afspraken</span>
</h1>
</section>
</body>
I'd like to have burger and school next to each other without deleting the colors.
enter image description here
.title { display: block } is causing the elements to break into new lines. Using display: inline-block will allow you to rotate the element while keeping them on the same line.
.title{
transform: rotate(-5deg);
display: inline-block;
}
Additional reading: https://css-tricks.com/almanac/properties/d/display/
#import url(https://fonts.googleapis.com/css?family=Fjalla+One);
html{
height: 100%;
}
body{
font-family: 'Fjalla One', sans-serif;
background: linear-gradient(to bottom, #405166 0%, #656f6f 100%);
}
.container{
margin: auto;
}
h1{
text-transform: uppercase;
font-size: 42px;
line-height: 47px;
letter-spacing: 2px;
text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;
text-align: center;
}
.title{
transform: rotate(-5deg);
display: inline-block;
}
<body>
<section class="container">
<h1>
<br />
<span class="title" style="color:#e55643;">Burger</span>
<span class="title" style="color:#2b9f5e;">school</span>
<span class="title" style="color:#f1c83c;">afspraken</span>
</h1>
</section>
</body>
try this,... not sure this is what you wanted
<body>
<section class="container">
<h1>
<br />
<span class="title" >
<label style="color:#e55643;">Burger</label>
<label style="color:#2b9f5e;">school</label>
</span>
<span class="title" style="color:#f1c83c;">afspraken</span>
</h1>
</section>
</body>
////////to remove space between labels do this.
<body>
<section class="container">
<h1>
<br />
<span class="title" >
<label style="color:#e55643;">Burger</label><label style="color:#2b9f5e;">school</label>
</span>
<span class="title" style="color:#f1c83c;">afspraken</span>
</h1>
</section>
remove the space between label it should be on same line without space
<h1>
<br />
<span class="title" style="color:#e55643;">Burger</span><span class="title" style="color:#2b9f5e;">school</span><span class="title" style="color:#f1c83c;">afspraken</span>
you will have no gap between them now :)
just write the spans in the same line, not on different lines
let me know if this works
Im trying to center this button but can't seem to get it to work, any help is much appreciated.
<div class="cta-btn">
<a class="btn btn-cta text-center" href="#" role="button">EXPLORE</a>
</div>
And the CSS
.btn-cta{
padding: 25px 80px;
border: 3px solid white;
background-color: transparent;
color: white;
font-family: Tahoma, Verdana, Segoe, sans-serif;
text-transform: uppercase;
font-size: 1.4em;
transition: all 0.3s ease;
}
Put the .text-center class on the enclosing div
<div class="cta-btn text-center">
<a class="btn btn-cta" href="#" role="button">EXPLORE</a>
</div>
Also, if you want the button to fill the width of the div, add the .btn-block class to the button.
use class text-center
<div class="cta-btn text-center">
<a class="btn btn-cta text-center" href="#" role="button">EXPLORE</a>
</div>
Did you try adding text-align: center;
display: block;
margin: 0 auto;