My HTML file is :-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kitty Portfolio</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/100x100" class="img-responsive" alt="Logo">
</div>
<div class="col-md-6 text-uppercase text-right">
<h1 class="super-text">Jane Doette</h1>
<h3>Front-end Ninja</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1140x350" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Featured Work</h2>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<img src="http://placehold.it/555x300" class="img-responsive">
<h3>Appify</h3>
<p>Link to project</p>
</div>
<div class="col-md-4">
<img src="http://placehold.it/555x300" class="img-responsive">
<h3>Sunflower</h3>
<p>Link to project</p>
</div>
<div class="col-md-4">
<img src="http://placehold.it/555x300" class="img-responsive">
<h3>Bokeh</h3>
<p>Link to project</p>
</div>
</div>
</div>
</body>
</html>
And my css file is :-
.super-text {
font-size: 60px;
font-weight: 200;
}
body {
font-family: 'Lato', sans-serif;
color: #747704;
font-weight: 100;
}
Now, When I open the html file in a browser. The font style and color makes it but the font-weight is nor affecting the any text on the screen. I tried mozilla firefox, chrome and internet explorer and none of these browsers do any good. Does anyone know where my problem might be lying.
change font-eight in your CSS to 700px
i didn't encounter any problem with none of these 3 browsers but i got better results with
font-size: 60pt;
instead of using px in css file for size.
For font-weight don't use numbers, valid values are ;
normal|lighter|bold|bolder|value|initial| inherit
Related
What is the proper Web combonent name for this? Is it Card, Caption? And Does CSS Bootrap have a component for this? Our Customers wants to build a web component as designed below. An Image with Title Description.
There is no specific CSS component in Bootstrap that can match with your image but you can use some CSS style from Bootstrap.
you can try this and change title side CSS according to your requirement
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row" style="height: 100px;" >
<div class="col-md-2" style="background-color:lavender;">
<img src="img.png" class="align-self-center mr-3"style="position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
<div class="col-md-2" style="background-color: #b3b2b2;text-align: center;">
<p style="position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);">title<p/></div>
</div>
</div>
</body>
</html>
Use this
<div class="media">
<img src="img.png" class="align-self-center mr-3" style="width:60px">
<div class="media-body">
<h4>Title</h4>
<p>use this </p>
</div>
</div>
or
<div class="col-md-6">
<div class="col-md-3">
<img src="">
</div>
<div class="col-md-3">
<h2 class="bg-secondary text-white">title</h2>
</div>
</div>
I have an img nested in a col. However, the col is larger than the image. It's as if there is padding at the bottom, but I don't see any. Here is a screenshot: https://imgur.com/a/K8iRWLf
There is another img nested within a separate col in the same row, but that img is the exact same size.
EDIT* I tried two fixes per a suggestion: display: block and vertical-align: bottom (separately), neither of which worked.
.img-shrink {
max-width: 80%;
max-height: 80%;
}
<div class="row justify-content-center">
<div class="col-3 body-padding text-center">
<img class="img-fluid img-shrink" src="img/dog-beer.jpg" alt="beer">
</div>
<div class="col-3 body-padding text-center">
<img class="img-fluid img-shrink" src="img/dog-treats.jpg" alt="treats">
</div>
</div>
<div class="row justify-content-center">
<div class="col-2 align-text-top">
<h4 class="product-header">Lorem Ipsum</h4>
</div>
<div class="col-2 align-text-top">
<h4 class="product-header">Lorem Ipsum</h4>
</div>
</div>
After playing around, I figured it out. The col is sized to the actual size of my image, not the max-width/height: 80% image that the browser renders. If anyone knows a way around this without resizing the original image, please enlighten me.
Try this once and see if it works
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div class="row justify-content-center">
<div class="col-3">
<img class="img-fluid" src="img.jpg" alt="beer">
</div>
<div class="col-3">
<img class="img-fluid" src="image.jpg" alt="treats">
</div>
</div>
<div class="row justify-content-center">
<div class="col-3 align-text-top text-center">
<h4 class="product-header">Lorem Ipsum</h4>
</div>
<div class="col-3 align-text-top text-center">
<h4 class="product-header">Lorem Ipsum</h4>
</div>
</div>
</body>
</html>
As you can see, "11111111..." and "22222222..." are overlapping. I think this is because the former exceeds the grid it belongs to, i.e. <div class="col-xs-6 col-lg-4">.
<!DOCTYPE html>
<html>
<head>
<title>
Test
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-lg-4">
<h2>11111111111111111111111111111111</h2>
</div>
<div class="col-xs-6 col-lg-4">
<h2>22222222222222222222222222222222</h2>
</div>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
It looks like this in my browser(Safari Version 9.1.2 (11601.7.7)):
What am I doing wrong?
Add word-wrap: break-word; to h2 element. because the default setting for word-wrap is normal. which wrap only for limited set of split tokens (example: whitespaces, hyphens).
HTML:
<div class="container">
<div class="row">
<div class="col-xs-6 col-lg-4">
<h2 class="w-wrap">11111111111111111111111111111111</h2>
<p class="text-muted ">11111111111111111111111111111111</p>
</div>
<div class="col-xs-6 col-lg-4">
<h2 class="w-wrap">22222222222222222222222222222222</h2>
<p class="text-muted">22222222222222222222222222222222</p>
</div>
</div>
</div>
CSS:
.w-wrap{
word-wrap: break-word;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6"><img src="http://placehold.it/150x150" class="img-responsive title-logo"></div>
<div class="col-md-6 text-right text-uppercase title-thin">
<h1>Trevor Cleworth</h1>
<h3>Junior Web Developer</h3>
</div>
</div>
<div class="row">
<hr>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1400x350" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3>Featured Work</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
</div>
</div>
This is the code that is connected with my CSS file, the font family will work but the font weight will not, does anyone see why this is? I will link my CSS below. I have been trying to figure out the problem for about thirty minutes but I haven't been able to find anything. If somebody could please show me what the problem is I would appreciate it a ton!
body {
font-family: 'Lato', sans-serif;
font-weight: 300;
color: #333333;
}
add #import url(http://fonts.googleapis.com/css?family=Lato); to your css sheet.
then tell me how it works, I don't have Lato font in my Windows fonts on my laptop
I have just started learning front-end web development. I was working on my portfolio mockup and I am having issues with image sizing. I am using bootstrap framework. When i use an image with img-responsive class, the height and width of the image I upload are set automatically. Since I wanted to set the height myself, I changed the height of the image (in css file). However, now when i reduce my browser's width in order to see how my portfolio will look when in mobile view, the width resizes but the height remains the same. This makes the image look disproportional. How can i fix this? If I don't use custom height, everything is fine in mobile view.
this worked for me in my google chrome browser. As far as the mobile view and other devices this meta tag helps "meta name="viewport" content="width=device-width, initial-scale=1.0" (refer to the meta tag in my html head element)
hr {
border-style: solid;
border-width: 1px;
width: 100%;
}
.featured-work {
color: #BCBBBB;
}
.font {
font-family: 'Lato', sans-serif;
font-weight: 100;
font-size: 60px;
}
.font1 {
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 20px;
}
.footer-title-fonts {
color: #747704;
}
.name {
margin-top: 66px;
}
.ulogo {
margin-top: 40px;
}
.multiple-borders {
box-shadow: 0px 0px 0px 7px black;
}
.multiple-borders1 {
box-shadow: 0px 0px 0px 7px blue;
}
.multiple-borders2 {
box-shadow: 0px 0px 0px 7px red;
}
.multiple-borders3 {
box-shadow: 0px 0px 0px 7px green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container"> <!-- start of container class -->
<div class="row"> <!-- start of row class -->
<!-- udacity logo -->
<div class="col-md-6">
<img class="ulogo" src="images/logo.jpg" alt="udacity logo">
</div>
<!-- end of udacity logo -->
<!-- start of name div -->
<div class="col-md-6">
<h1 class="font name text-uppercase text-right">Jane Doette</h1>
<h5 class="font1 text-uppercase text-right">Front-end ninja</h5>
</div>
<!-- end of name div -->
</div> <!-- end of row class -->
<hr>
<!-- main image -->
<div class="row">
<div class="col-md-12">
<img class="img-responsive multiple-borders" src="http://placekitten.com/1170/500" alt="filler image">
</div>
</div>
<!-- end of main image -->
<!-- bottom 3 images -->
<div class="row"> <!-- start of row class -->
<div class="col-md-12">
<h3 class="featured-work">Featured Work</h3>
</div>
<!-- First Image -->
<div class="col-md-4">
<img src="http://placekitten.com/550/400" class="img-responsive multiple-borders1" alt="filler image">
<h2 class="footer-title-fonts text-center text-uppercase">Applify</h2>
<h6 class="footer-title-fonts text-center">https://github.com/udacity/Appify/</h6>
</div>
<!-- End of frst Image -->
<!-- Second Image -->
<div class="col-md-4">
<img src="http://placekitten.com/550/400" class="img-responsive multiple-borders2" alt="filler image">
<h2 class="footer-title-fonts text-center text-uppercase">Sunflower</h2>
<h6 class="footer-title-fonts text-center">https://github.com/udacity/Sunflower/</h6>
</div>
<!-- End of second Image -->
<!-- Third Image -->
<div class="col-md-4">
<img src="http://placekitten.com/550/400" class="img-responsive multiple-borders3" alt="filler image">
<h2 class="footer-title-fonts text-center text-uppercase">Bokeh</h2>
<h6 class="footer-title-fonts text-center">https://github.com/udacity/Bokeh/</h6>
</div>
<!-- End of Third Image -->
<!-- end of bottom 3 images -->
</div> <!-- end of row class -->
</div> <!-- end of container class -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap_css/bootstrap.min.css">
<link rel="stylesheet" href="Custom_css/P1.css" media="screen" title="no title" charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300' rel='stylesheet' type='text/css'>
<title>Project 1</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="top-image" src="images/udacity.png" width="200px" class="img-responsive" alt="Responsive image">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1 class="text-thin">Jiwanjot Singh</h1>
<h4>Front-end Ninja</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="images/mainimage.jpg" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Featured Work</h2>
</div>
</div>
<div class="row">
<div class="col-md-4 text-center">
<img class="img-responsive" src="images/arcade.jpg" alt="Placehold Image" />
<h3 class="text-uppercase">ArcadeDemo</h3>
<p>https://github.com/udacity/ArcadeDemo/</p>
</div>
<div class="col-md-4 text-center">
<img class="img-responsive" src="images/alarm.jpg" alt="Placehold Image" />
<h3 class="text-uppercase">AlarmMe</h3>
<p>https://github.com/udacity/AlarmMe/</p>
</div>
<div class="col-md-4 text-center">
<img class="img-responsive" src="images/bokeh.jpg" alt="Placehold Image" />
<h3 class="text-uppercase">Bokeh</h3>
<p>https://github.com/udacity/Bokeh/</p>
</div>
</div>
</body>
</html>