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>
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'm currently working on a simple webpage for my music-project and want to make the Navigation-Bar stay on top of everything else all the time. I've set an absolute position, z-index and overflow:hidden, but I can't seem to find the tiny cause of my problem.
There are more people with similar issues and I tried more solutions but I just can't find my error.
When I resize the window, my elements still mix into eachother:
I attached my full code below:
<html>
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>fabrice.</title>
<meta name="description" content="fabrice - official website">
<meta name="author" content="Daniel Pölzgutter">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" type="text/css" href="/style.css">
<!-- favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="shortcut icon" type="image/png" href="/res/icons/favicon.png"/>
</head>
<body>
<!-- PAGES
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<!--featured-->
<div id="js_featured" class="page">
<div class="container">
<div class="row">
<div class="twelve columns" style="margin-top: 5%">
<h4 align="center" style="font-family: aileron-heavy; font-size: 50px">featured</h4>
</div>
<div class="twelve columns">
<p align="center" style="font-family: aileron-thin; font-size: 25px">...</p>
</div>
</div>
</div>
</div>
<!--releases-->
<div id="js_music" class="page" style="display:none">
<div class="container">
<div class="row">
<div class="twelve columns" style="margin-top: 5%">
<h4 align="center" style="font-family: aileron-heavy; font-size: 50px">releases</h4>
</div>
<div class="twelve columns">
<p align="center" style="font-family: aileron-thin; font-size: 25px">...</p>
</div>
</div>
</div>
</div>
<!--contact-->
<div id="js_contact" class="page" style="display:none">
<div class="container">
<div class="row">
<div class="twelve columns" style="margin-top: 5%">
<h4 align="center" style="font-family: aileron-heavy; font-size: 50px">contact</h4>
</div>
<div class="twelve columns">
<p align="center" style="font-family: aileron-thin; font-size: 25px">...</p>
</div>
</div>
</div>
</div>
<!-- NAVIGATION BAR
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div id="navbar_box">
<div class="navbar">
<div id="brand_box">
<div class="brandtext">fabrice.</div>
</div>
<div id="textbutton_box">
<button class="textbutton" onclick="openPage('js_featured')">featured</button>
<button class="textbutton" onclick="openPage('js_music')">releases</button>
<button class="textbutton" onclick="openPage('js_contact')">contact</button>
</div>
<div id="icon_box">
</div>
</div>
</div>
<!-- JAVASCRIPT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script>
/*switch sites*/
function openPage(name) {
var i;
var x = document.getElementsByClassName("page");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(name).style.display = "block";
}
</script>
</body>
HTML
CSS
Is this want you want? https://jsfiddle.net/cCrul/a4g3ghLt/
I just removed this:
.navbar{
background-color: white;
}
And add background-color: white; to #navbar_box styles:
#navbar_box {
background-color: white;
(...)
}
Have you tried position:fixed,and don't use overflow property
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
<!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 want to have image on jumbotron and on this image some buttons from bootstrap and some other divs of course with bootstrap(my calendar). I want to create page full responsive so after version for computers I'm going to create version for mobiles. I wan't it to be something like this http://postimg.org/image/nmdsbws6d/ Thank for all responses
<html>
<head>
<title>calendar</title>
<!--STYLES-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.js"></script>
<link rel="shortcut icon" type="images/ico" href="media/img/favicon.ico"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
</style>
</head>
<body>
<br><br><br><br>
<center>
<div class="jumbotron" style="background:url() no-repeat scroll center center / cover;">
<div class="container transparent" style="background-color: rgba(255, 255, 255, 0.6); padding:60px;">
<div class="row" style="background:url(<?php echo asset_url();?>media/img/tro.jpg) no-repeat center; height: 100%; width: 100%;">
<!-- now this row is outside img-->
<div class ="col-md-2 calendarbox1">
</div>
<div class ="col-md-1 " >
<img src="<?php echo asset_url();?>media/img/kalendarz/pon.png" style="height: 60px;">
</div>
<div class ="col-md-1 ">
<img src="<?php echo asset_url();?>media/img/kalendarz/wto.png" style="height: 60px">
</div>
<div class ="col-md-1 ">
<img src="<?php echo asset_url();?>media/img/kalendarz/sro.png" style="height: 60px">
</div>
<div class ="col-md-1 ">
<img src="<?php echo asset_url();?>media/img/kalendarz/czw.png" style="height: 60px">
</div>
<div class ="col-md-1 ">
<img src="<?php echo asset_url();?>media/img/kalendarz/pia.png" style="height: 60px">
</div>
<div class ="col-md-1 ">
<img src="<?php echo asset_url();?>media/img/kalendarz/sob.png" style="height: 60px">
</div>
<div class ="col-md-1 col-centered">
<img src="<?php echo asset_url();?>media/img/kalendarz/niedz.png" style="height: 60px">
</div>
<div class ="col-md-3 col-centered calendarbox1">
</div>
<!--
<div class="button-container">
<div class="btn btn-default" >Button</div>
<div class="btn btn-default">Button</div>
</div> -->
</div>
</div>
</div>
</body>
</html>
If your just trying to figure out how to get the image as the background. You can add it as a background to the jumbotron itself.
<div class="jumbotron container" style="background:url(http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg) no-repeat scroll center center / cover; height:600px;'">
I edited your code below. The styles aren't exact to the image you posted. But I believe this answers what you asked.
EDIT: Based on your comment below, I have edited the code, this seems closer to what you want.
<html>
<head>
<title>calendar</title>
<!--STYLES-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.js"></script>
<link rel="shortcut icon" type="images/ico" href="media/img/favicon.ico"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.calendarbox{
border: 2px solid gray;
width: 70px;
height: 60px;
}
.calendarbox1{
border: 3px solid ;
display: none;
}
</style>
</head>
<body>
<br><br><br><br>
<center>
<div class="jumbotron" style="background:url(http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg) no-repeat scroll center center / cover;">
<div class="container transparent" style="background-color: rgba(255, 255, 255, 0.6); padding:60px;">
<div class="myimage" style="background:url(http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg) no-repeat scroll center center / cover; height:600px;">
<div class="row">
<div class ="col-md-1 col-centered ">
<div class="calendarbox1"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox1"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class="col-md-1 col-centered ">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox1"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox1"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox1"></div>
</div>
</div>
<div class="button-container">
<div class="btn btn-default" >Button</div>
<div class="btn btn-default">Button</div>
</div>
</div>
</div>
</div>
</body>
</html>