Whats up friends, great friday for yous!
So I been rebuilding the website for the company I work to learn HTML+CSS.
Just doing a replica of the original website and its been going great.
So I am having some issues on the the footer right now, the items are mixing on smaller screens.
On the image below you can see (1) how it is and the desired result and (2) what is happening with me.
Here is my code:
.footer {
color: #fff;
height: 140px;
background: linear-gradient(180deg, #130936, #130936) no-repeat center;
font-family: 'Open Sans', sans-serif;
}
.container {
width: 70%;
}
p, p a {
text-decoration:none;
color: hsla(0, 0%, 100%, 0.72);
letter-spacing: 0.3px;
font-size:14px;
}
.footer-brand {
width: 136px;
background: url(https://i.ibb.co/zbq2q4D/pngwing-com-1.png) left center no-repeat;
border: 0;
text-indent: -99999px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
i {
color: #fff;
font-size: 30px;
padding-left: 4px;
padding-right: 4px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
</head>
<body>
<footer class="footer">
<div class="container-md h-100">
<div class="row align-items-center h-100 row-cols-4">
<div class="col-3"><img class="footer-brand" src="https://i.ibb.co/zbq2q4D/pngwing-com-1.png" alt=""></div>
<div class="col-3">
<p class="p1">+44 (0) 700 677 1336</p>
<p>info#companyIwork.com</p>
</div>
<div class="col-3 text-center">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-linkedin"></i>
</div>
<div class="col-3">
<p>© 2022 - TheCompanyIWork Limited</p>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
I do appreciate your help.
I think what you're missing is the use of the responsiveness prefixes for the col class, when you declare col or col-x as a class it means that the class would automatically be with a fixed size in relation to the other grids, to overcome content overlapping you'll need to the prefixed to determine the screen size from which the content is being displayed upon i.e col-sm-x, col-md-x etc
Read more about bootstrap grid from here https://getbootstrap.com/docs/5.3/layout/grid/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css"
/>
</head>
<body>
<footer class="footer">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-xs-12 col-md-3 text-center">
<img
class="footer-brand image-fluid"
src="https://i.ibb.co/zbq2q4D/pngwing-com-1.png"
alt=""
style="width:80px"
/>
</div>
<div class="col-xs-12 col-md-3 text-center">
<p class="p1">
+44 (0) 700 677 1336
</p>
<p>
info#companyIwork.com
</p>
</div>
<div class="col-xs-12 col-md-3 text-center">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-linkedin"></i>
</div>
<div class="col-xs-12 col-md-3 text-center">
<p>© 2022 - TheCompanyIWork Limited</p>
</div>
</div>
</div>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"
></script>
</body>
</html>
NOTE: The snippet above does not consider your stylesheet, so be cautious your stylesheet might override some bootstrap styles
SUGGESTION: Also consider reading bootstrap colors from https://getbootstrap.com/docs/5.0/utilities/colors/
Related
I added share buttons from Sharethis.com. When I refresh the page button does not appear, but when I resize the wievport it appears.
`
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=63a323358fb8b6001abbbf6b&product=inline-share-buttons&source=platform" async="async"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Article preview component</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/7ab7d5ca64.js" crossorigin="anonymous"></script>
<style>
body {
font-family: 'Kumbh Sans', sans-serif;
background: hsl(240, 5%, 91%);
}
.arrow {
width: 70px;
}
.pop {
width: 15rem;
right: 16rem;
top: 14rem;
}
.arrow {
width: 5rem;
color: black;
}
#share {
color: white;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<div class="container mt-5">
<div class="card shadow-lg">
<div class="row">
<img src="./images/drawers.jpg" alt="drawer image" class="col-4">
<div class="col-6 p-4">
<h1>Shift the overall look and feel by adding these wonderful touches to furniture in your home</h1>
<p>Ever been in a room and felt like something was missing? Perhaps it felt slightly bare and uninviting. I’ve got some simple tips to help you make any room feel complete.</p>
<div class="row">
<img src="./images/avatar-michelle.jpg" alt="michele image" class="col-2 rounded-circle">
<div class="col-6 mt-3">Michelle Apleton <br> 28 Jun 2020</div>
<div class="bg-light rounded-circle col-1 p-3 m-3 d-flex justify-content-center" id="button">
<img src="./images/icon-share.svg" alt="" class="">
</div>
<div class="pop position-absolute end-10 d-none" id="popup">
<div class="row bg-dark rounded text-white py-1 d-flex justify-content-center align-items-center">
<div class=" col-4 p-2">SHARE</div>
<div class="col-8 zet sharethis-inline-share-buttons"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
let changeClass = document.getElementById("button").addEventListener('click', () => {
document.getElementById("popup").classList.remove("d-none")
document.getElementById("popup").classList.add("d-block")
})
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
`
I placed their head code into the head. I tried Z-index, but it does not appear until resizing the viewport, narrowing or expanding does not matter, in both cases it appears.
I'm trying to center the items in <main> but there is a gap (I couldn't figure the reason) between the <h1> and <h3> element. Can somebody help to figure out why this gap occurs? TIA
It was perfectly aligned so probably I messed up while fixing navbar and the first version is not working anymore. I've also inspect page and it doesn't show anything between these items they all inside the <main> but nothing between them.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- adding Google fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Roboto&display=swap" rel="stylesheet">
<!-- adding bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- https://favicon.io/emoji-favicons/money-mouth-face/ -->
<link href="/static/favicon.ico" rel="icon">
<link href="/static/index.css" rel="stylesheet">
<title>{% block title %}Welcome{% endblock %}</title>
</head>
<body>
<nav class="navbar navbar-light container-fluid d-flex align-items-top justify-content-start">
<a class="navbar-brand" href="/"><img href="index.html" src="/static/ladybug.png" width="30" height="30" class="d-inline-block align-left" alt=""></a>
<a class="navbar-brand" href="/login">Login</a>
<a class="navbar-brand" href="/register">Register</a>
</nav>
{% block main %}
<main class="container-fluid d-flex align-items-center justify-content-center h-100 w-100">
<div class="row align-items-center h-100">
<h1 class="text-center col-12">Need help with debug your code?</h1>
<section class="text-center col-12">
<h3 class="d-inline-flex p-2"><strong>Find a study mate to solve problems quicker</strong></h3>
<div>
<center><hr></center>
</div>
<button type="button" class="btn btn-danger">Join Us Today!</button>
</section>
</div>
</main>
{% endblock %}
<footer class="row footer">
<p class="text-center col-12 ">EDX Harvard | CS50 2019 | Final Project</p>
</footer>
</body>
</html>
I mainly used bootstrap but here my css
body,
html
{
margin: 0;
width: 100%;
height: 100%;
background: url(/static/images/girl_2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.navbar-brand
{
font-family: 'Anton', sans-serif;
font-size: 3vmin;
}
h1
{
padding: 0px;
font-family: 'Anton', sans-serif;
font-size: 6vmin;
margin: 0;
color: #295696;
text-shadow: 0.1vmin 0.1vmin #6f8bb3;
}
h3
{
font-family: 'Roboto', sans-serif;
font-size: 3vmin;
padding: 10px;
color: #fec345;
background-color: #295696;
}
hr
{
border-color: #eb3461;
border-width: 3px;
max-width: 90px;
margin: 10px;
}
and the screenshot for the gap I couldn't figure out:
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- adding Google fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Roboto&display=swap" rel="stylesheet">
<!-- adding bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- https://favicon.io/emoji-favicons/money-mouth-face/ -->
<link href="/static/favicon.ico" rel="icon">
<link href="/static/index.css" rel="stylesheet">
<title>{% block title %}Welcome{% endblock %}</title>
</head>
<body>
<nav class="navbar navbar-light container-fluid d-flex align-items-top justify-content-start">
<a class="navbar-brand" href="/"><img href="index.html" src="/static/ladybug.png" width="30" height="30" class="d-inline-block align-left" alt=""></a>
<a class="navbar-brand" href="/login">Login</a>
<a class="navbar-brand" href="/register">Register</a>
</nav>
{% block main %}
<div class="container-fluid d-flex align-items-center justify-content-center h-100 w-100">
<div class="row justify-content-center">
<header class="text-center col-12">
<h1><strong>Need help with debug your code?</strong></h1>
</header>
<section class="text-center col-12">
<h3 class="d-inline-flex p-2"><strong>Find a study mate to solve problems quicker</strong></h3>
<div>
<center><hr></center>
</div>
<button type="button" class="btn btn-danger">Join Us Today!</button>
</section>
</div>
</div>
{% endblock %}
<footer class="row footer">
<p class="text-center col-12 ">EDX Harvard | CS50 2019 | Final Project</p>
</footer>
</body>
</html>
It doesn't matter color and kind of icon. The main goal is big icon on the left and big text on the right side.
Please have a look
body{
margin-top:20px;
background:#FAFAFA;
}
.order-card {
color: #fff;
}
.bg-c-blue {
background: linear-gradient(45deg,#4099ff,#73b4ff);
}
.card {
border-radius: 5px;
-webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
border: none;
margin-bottom: 30px;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.card .card-block {
padding: 25px;
}
.order-card i {
font-size: 26px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 col-xl-3">
<div class="card bg-c-blue order-card">
<div class="card-block">
<h2 class="text-right"><i class="fa fa-cart-plus float-left"></i><span>486</span></h2>
</div>
</div>
</div>
</div>
</div>
Fiddle
<div class="card w-50">
<div class="card-body d-flex justify-content-between">
<div class="display-3 d-flex">
<i class="fa fa-cart-plus"></i>
</div>
<div class="d-flex flex-column">
<div class="h2 mb-0">+562</div>
<div class="h4 font-weight-lighter mb-0">Total sells</div>
</div>
</div>
</div>
Have a look on it1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.cart-box{max-width:500px;padding:15px;background:#e9f0f9;}
.cart-holder{padding:10px;color:#fff;background:#009dc6;}
.cart-holder .icon-holder{font-size:50px;}
.cart-holder .text-holder span{display: block;}
.cart-holder .items-counter{font-size:28px;font-weight:bold;}
.cart-holder .items-text{font-size:20px;}
</style>
</head>
<body>
<div class="cart-box">
<div class="cart-holder">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-6">
<div class="icon-holder">
<i class="fa fa-shopping-cart"></i>
</div>
</div>
<div class="col-sm-6 col-6">
<div class="text-holder text-right">
<span class="items-counter">+562</span>
<span class="items-text">Today Sells</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Website structure currently looks like this:
index.html:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<!-- Own styles -->
<link rel="stylesheet" href="css/styles.css">
<title>My website</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-4 sidebar d-flex flex-column align-items-center justify-content-center text-center fixed-top">
<img src="images/avatar.jpg" class="rounded-circle">
<h3 class="text-light">John Doe</h3>
<h5 class="text-light">programmer</h5>
<p class="text-muted mt-5 mb-0">123 456 789</p>
<p class="text-muted">test#test.com</p>
<p class="mt-5 text-white">
Language 1
|
Language 2
</p>
<p class="social">
<i class="fab fa-facebook-f"></i></i>
<i class="fab fa-twitter"></i></i>
</p>
<p class="text-muted">© Someone | 2015 - 2019</p>
</div>
<div class="col-12 col-md-8 offset-md-4 d-flex flex-column mt-5 content">
<p>Content</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
styles.css:
#media (max-width: 767.98px) {
.sidebar {
height: auto !important;
padding-top: 10px;
padding-bottom: 10px;
position: static;
}
}
.sidebar {
background-color: #9DB9E8;
height: 100vh;
}
On devices with class md and less I want to split sidebar on the left into two parts. First part should be on the top of the page only with following lines of code:
<img src="images/avatar.jpg" class="rounded-circle">
<h3 class="text-light">John Doe</h3>
<h5 class="text-light">programmer</h5>
Second part should be at the bottom of the page (under div with class content) and contain all the remaining lines of code from sidebar. Both parts should have same styles as sidebar.
How do I achieve this in Bootstrap 4?
To do this, you should split them into two divs.
<div id="section1">
(what ever you want in 1st section.)
</div>
<div id="section2">
(whatever you want in 2nd section.)
</div>
I have a problem with image display on Iphone 6. Images are not loading on phone
on Windows and android is working fine. I am using bootstrap as framework..
I identified that when i put imige in img tag is working on iOS
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/main.js"></script>
<script src="https://use.fontawesome.com/9bc549d82c.js"></script>
</head>
<div class="head">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-12 col-xs-12">
</div>
<div class="col-md-6 col-sm-12 col-xs-12 box">
<p class="text-center" id="logo">
Codence <i class="fa fa-heart-o " aria-hidden="true" id=""></i>
</p>
<span id="line"></span>
<p class="lead text-center">
Learn more
</p>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
</div>
</div>
</div>
</div>
.head{
height: 100vh;
background: url('../img/pexels-photo-234527.jpeg') repeat fixed 100%;
background-size: cover;
margin: 0 auto;
};