I'm trying to make a display heading with an image to the left and to the right of the heading. It works great om lg-display but when i make the display smaller the heading text seems to overflow the column to the right making it asymetrical. I would like the images and the text to stay even with smaller screens. Am I doing something wrong with the grid system?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>farfetch'd | Official Website ‐</title>
<!--CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link href="https://fonts.googleapis.com/css2?family=Archivo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="CSS/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- favicon -->
<link rel="icon" href="Images\Logo-feather-without-stroke.png">
</head>
<body>
<body>
<div class="container">
<div class="row">
<div class="col">
<img class="float-right" src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
<div class="col">
<h1 class="display-4 text-center">farfetch'd</h1>
</div>
<div class="col">
<img src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
</div>
</div>
</body>
I assume you want the text to always fit in the middle div, one way you can achieve this is using vw for length instead of rem
rem:
Represents the font-size of the root element (typically <html>). When used within the root element font-size, it represents its initial value (a common browser default is 16px, but user-defined preferences may modify this).
vw:
Equal to 1% of the width of the viewport's initial containing block.
Check length for more info on this.Final result would be:
.heading {
font-size: 5vw;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>farfetch'd | Official Website ‐</title>
<!--CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link href="https://fonts.googleapis.com/css2?family=Archivo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="CSS/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- favicon -->
<link rel="icon" href="Images\Logo-feather-without-stroke.png">
</head>
<body>
<body>
<div class="container">
<div class="row">
<div class="col">
<img class="float-right" src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
<div class="col">
<h1 class="heading text-center">farfetch'd</h1>
</div>
<div class="col">
<img src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
</div>
</div>
</body>
i think this is the default behavior of h1 tag
you can change this behavior with overflow-wrap overflow , etc in css
Related
How to wrap images responsively inside the columns. The images doesn't fit inside the column and the screen of 360px.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<meta name="viewport" content="width=device-width initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond|EB+Garamond|Great+Vibes" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-xs-6 col-sm-4"><img src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853"></div>
<div class="col-xs-6 col-sm-4"><img src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853"></div>
<div class="col-xs-6 col-sm-4"><img src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853"></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4"><img src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853"></div>
<div class="col-xs-6 col-sm-4"><img src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853"></div>
<div class="col-xs-6 col-sm-4"><img src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853"></div>
</div>
</body>
</html>
Set the max-width attribute on the images and they should fit nicely.
css: img{max-width:100%}
Or, you can apply the style directly to the element. For example, change this:
<img src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853">
to this:
<img style="max-width:100%" src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853">
You need to declare width and height like this.
<img style="width:100%; height:auto;" src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853">
add this style and your images should automatically fit which ever grid size you set, Avoid pixel in Grid unless you need a fix size try percentage like 20%, rest depends on your project
<style>
body img{max-width:100%;width:100%;vertical-align:unset;text-align:center;}
</style>
That's it.
I have been having a problem with my code, I wanted the text to be in the centre, but no matter what I do, it just won't go there. I have added a comment indicating the location of the text I wanted to be centred. Any help is appreciated.
<!DOCTYPE html>
<html lang="en" class="no-js">
<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>Mix Pics</title>
<meta name="description" content="A photography-inspired website layout with an expanding stack slider and a background image tilt effect" />
<meta name="keywords" content="photography, template, layout, effect, expand, image stack, animation, flickity, tilt" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/flickity.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<div class="hero">
<div class="hero__back hero__back--static"></div>
<div class="hero__back hero__back--mover"></div>
<div class="hero__front"></div>
</div>
<header class="codrops-header">
<div class="codrops-links">
<a class="codrops-icon codrops-icon--prev" href="index.html" title="Home Page"><span>Home Page</span></a>
<a class="codrops-icon codrops-icon--drop" href="index.html" title="Home Page"><span>Home Page</span></a>
</div>
<h1 class="codrops-title">Mix <span>Pics</span></h1>
<div align="center">
<h3>About</h3> <!-- This text for some reason is in the top right hand corner, not the centre. -->
</div>
</body>
I have a banner header that display's its banner image when in the main directory of the site but once I move the HTML file to a sub folder and update all the links to reflect the folder change the banner image no longer displays. In all of my code editors, the path to the image is set correctly. Below you will find the code in my header and also the section of code that isn't working properly. top-banner.jpg is the question at hand here. All other images on the page work and are in the same directory as the banner image. Any suggestions would be greatly appreciated.
<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>Products</title>
<meta name="description" content="">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/font-awesome.css" rel="stylesheet">
<link href="../css/flaticon.css" rel="stylesheet">
<link href="../css/fopen-sans.css" rel="stylesheet">
<link href="../css/raleway-webfont.css" rel="stylesheet">
<link href="../css/lato.css" rel="stylesheet">
<link href="../css/idangerous.swiper.css" rel="stylesheet">
<link href="../css/magnific-popup.css" rel="stylesheet">
<link href="../img/favicon.ico" rel="shortcut icon">
<link href="../css/style.css" rel="stylesheet">
<link href="../css/responsive.css" rel="stylesheet">
</head>
<div class="wpc-top-header overlay img-bg">
<img src="../img/top-banner.jpg" alt="banner" class="hidden">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="wrapper">
<div class="heading">Our Products</div>
<div class="subheding">
home<span class="round"></span>
pages<span class="round"></span>
Our Products
</div>
</div>
</div>
</div>
</div>
</div>
remove class="hidden" in <img src="../img/top-banner.jpg" alt="banner" class="hidden">
Edit: As can be seen from the provided links, the file /htmltest/js/scripts.js contains:
/*-------------------------*/
/* ADD BACKGROUND IMAGE */
/*-------------------------*/
$(".img-bg").each(function(){
$(this).css("background-image", "url("+$(this).find("img").attr('src')+")");
});
However, the path js/scripts.js is not updated to ../js/scripts.js, and this script is not executed. So just replace all js/into ../js/ in the HTML file.
Your old version adds a style into the div tag with class overlay. Its adding:
style="background-image: url("img/top-banner.jpg");"
So add that to your new <div> but obviously with the new path. That fixes it for me, so to clarify the line should now be:
<div class="wpc-top-header overlay img-bg" style="background-image: url('../img/top-banner.jpg');">
My code is not working, it is not showing horizontal columns. I tried everything, using sublime text 2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custome.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">col1</div>
<div class="col-xs-6">col2</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
In your browser, right click on the page and View Page Source. Click on the link to css/bootstrap.min.css and see if it successfully loads the bootstrap styles. I'm wondering if this path needs correcting.
Your code works for me when I use the bootstrap CDN: http://jsfiddle.net/t2rbyj38/
I want to implement the fluid layout. Shown as here http://twitter.github.com/bootstrap/scaffolding.html#global
What i did:
added gem 'twitter-bootstrap-rails + bundle install
layouts/applicationlayout
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
SIDEBAR
</div>
<div class="span10">
<%= yield %>
</div>
</div>
</div>
</body>
nothing took change. What did i forget?
The bootstrap-responsive.css file is only part of bootstrap. The main css file you need is called bootstrap.css
Try adding this line of code in your header and see if anything changes:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
Actually, it does work, look at the jsFiddle:
http://jsfiddle.net/persianturtle/sEywB/