I'm using http://erikflowers.github.io/weather-icons/ to display weather icons on my page. However, after inserting the cdn. It doesn't work.
https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css the icon has a class of "wi-wom-200" taken from http://erikflowers.github.io/weather-icons/api-list.html since I'm using openweathermap.com for my api. Any help on how to display this icon. Openweahtermap provides their own icons, but very low resolution. Thanks
/*
stylesheet for weather app
*/
body {
background-image: url("../img/city_vector.jpg");
min-height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
}
/* background color on top of bg image*/
.hero {
position: absolute;
min-height: 100vh;
min-width: 100vw;
top: 0;
bottom: 0;
background-color: rgba(31, 34, 118, 0.5);
z-index: -5;
}
/* navbar */
.navbar {
background-color: rgb(69, 106, 171);
}
.navbar a {
color: white;
font-size: 25px;
}
/* weather section */
.weather {
border: 1px solid white;
height: 30rem;
margin-top: 10rem;
/*background-color: rgba(160, 167, 187, 0.5);*/
background-color: rgba(0, 0, 0, 0.5);
/*background-color: rgba(213, 193, 193, 0.5);*/
border-radius: 20px;
color: white;
}
.weather-head {
height: 50%;
}
#weather-icon {
height: 7rem;
width: 7rem;
}
.weather-body {
height: 50%;
border-top: 1px solid white;
padding-top: 0.5rem;
}
#description {
/*border: 1px solid white;*/
font-size: 2rem;
/*margin-top: 2rem;*/
}
#temperature {
/*border: 1px solid white;*/
font-size: 7rem;
}
span {
font-size: 3rem;
}
<!DOCTYPE html>
<html>
<head>
<title>Weather App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<div class="hero">
<!-- navbar -->
<nav class="navbar">
<a class="navbar-brand" href="#">
<!-- <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> -->
<i class="fa fa-sun-o" aria-hidden="true"></i>
<strong>Local</strong>Weather
</a>
</nav>
<!-- weather section -->
<div class="container">
<div class="row">
<div id="" class="col-8 mx-auto weather">
<div class="weather-head">
<h2 id="location" class="text-center"></h2>
<div class="row">
<div id="description" class="description col-6 text-center">
<i class="wi wi-wom-200"></i> Thunderstorm
</div>
<div id="temperature" class="col-6 text-center">
</div>
</div>
<div class="weather-body">
<div class="row">
<div class="humidity col-4">
<div class="lead text-center">Humidity</div>
</div>
<div class="wind col-4">
<div class="lead text-center">Wind Speed</div>
</div>
<div class="wind-degree col-4">
<div class="lead text-center">Wind Direction</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You have not included the icons cdn link. Use this
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css">
And then use wi-owm-200 class for the icon
body {
background-image: url("../img/city_vector.jpg");
min-height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
}
.hero {
position: absolute;
min-height: 100vh;
min-width: 100vw;
top: 0;
bottom: 0;
background-color: rgba(31, 34, 118, 0.5);
z-index: -5;
}
.navbar {
background-color: rgb(69, 106, 171);
}
.navbar a {
color: white;
font-size: 25px;
}
.weather {
border: 1px solid white;
height: 30rem;
margin-top: 10rem;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 20px;
color: white;
}
.weather-head {
height: 50%;
}
#weather-icon {
height: 7rem;
width: 7rem;
}
.weather-body {
height: 50%;
border-top: 1px solid white;
padding-top: 0.5rem;
}
#description {
font-size: 2rem;
}
#temperature {
font-size: 7rem;
}
span {
font-size: 3rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css">
<div class="hero">
<nav class="navbar">
<a class="navbar-brand" href="#">
<i class="fa fa-sun-o" aria-hidden="true"></i>
<strong>Local</strong>Weather
</a>
</nav>
<div class="container">
<div class="row">
<div id="" class="col-8 mx-auto weather">
<div class="weather-head">
<h2 id="location" class="text-center"></h2>
<div class="row">
<div id="description" class="description col-6 text-center">
<i class="wi wi-owm-200"></i> Thunderstorm
</div>
<div id="temperature" class="col-6 text-center">
</div>
</div>
<div class="weather-body">
<div class="row">
<div class="humidity col-4">
<div class="lead text-center">Humidity</div>
</div>
<div class="wind col-4">
<div class="lead text-center">Wind Speed</div>
</div>
<div class="wind-degree col-4">
<div class="lead text-center">Wind Direction</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I want the image in my site to completely change when the browser is resized.
I've been using media-queries, but I can't seem to get it right. Any thoughts/tips?
The thing is I have tried the display trick with media query but its not working
I did this, but it's not working even when I am lowering the viewport. The image in the laptop viewport remains the same in the phone viewport.
.blocks {
height: 58%;
}
.mob {
display: none;
}
#media (max-width:400px) {
.mob {
display: block;
}
.blocks {
display: none;
}
}
<div class="col-lg-6 border:1px">
<img class="blocks" src="https://via.placeholder.com/200" alt="laptop-mockup">
<img class="mob" src="https://via.placeholder.com/200/ff0000" alt="android-mockup">
</div>
The whole html and css code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>News homepage</title>
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<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=Poppins:wght#400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght#600;700;800&family=PT+Sans:wght#700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="navigator">
<nav class="navbar navbar-expand-sm navbar-dark navbar-light">
<a class="navbar-brand" href=""> <img src="C:\Users\91826\Desktop\news-homepage-main\css\images\logo.svg" alt="My Happy SVG" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation navbar-light">
<span class="navbar-toggler-icon navi"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#footer">Home </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#pricing"> New </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#cta"> Popular </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link" href="#footer"> Trending </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#footer"> Categories </a>
</li>
</ul>
</div>
</nav>
</div>
<div class="row ">
<div class="col-lg-6 border:1px">
<img class="blocks" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-web-3-desktop.jpg" alt="laptop-mockup">
<img class="mob" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-web-3-mobile.jpg" alt="android-mockup">
</div>
<div class="tag">
<h1 class="tagline">The Bright<br />Future of<br />Web 3.0?</h1>
</div>
<div class="read">
<h1 class="readline">We dive into the next evolution of the web that claims to put the power of the platforms back into the hands of the people.
But is it really fulfilling its promise?</h1>
</div>
<button class="button-50 readmore" type="button" name="button">READ MORE</button>
<div class="col-lg-6 border:1px">
<div class="new">
<h1>New</h1>
<h2>Hydrogen VS Electric Cars</h2>
<h3>Will hydrogen-fueled cars ever catch up to EVs?</h3>
<hr>
<h2>The Downsides of AI Artistry</h2>
<h3>What are the possible adverse effects of on-demand AI image generation?</h3>
<hr>
<h2>Is VC Funding Drying Up?</h2>
<h3>Private funding by VC firms is down 50% YOY. We take a look at what that means.</h3>
</div>
</div>
</div>
</div>
<div class="info">
<div class="row">
<div class="col-lg-4 box">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-retro-pcs.jpg" alt="" />
</div>
<div class="col-lg-2 box">
<div class="inf">
<h1 class="infohead1 "> 01</h1>
<h2 class="infohead2"> Reviving Retro PCs</h2>
<h3 class="infohead3"> What happens when old PCs<br>are given modern upgrades?</h3>
</div>
</div>
</div>
</div>
<div class="col-lg-4 box2">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-gaming-growth.jpg" alt="">
</div>
<div class="col-lg-2 box">
<div class="inf1 inf">
<h1 class="infohead1"> 02</h1>
<h2 class="infohead2"> Top 10 laptops of 2022</h2>
<h3 class="infohead3">Our best picks for various <br> needs and budgets.</h3>
</div>
</div>
</div>
</div>
<div class="col-lg-4 box2">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-top-laptops.jpg" alt="">
</div>
<div class="col-lg-2 box">
<div class="inf">
<h1 class="infohead1"> 03</h1>
<h2 class="infohead2"> The Growth of Gaming</h2>
<h3 class="infohead3">How the pandemic has sparked <br> fresh opportunities.</h3>
</div>
</div>
</div>
</div>
</div>
<hr class="hori">
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Saswat Seth.
</div>
</body>
</html>
CSS
.navigator {
margin-bottom: 2%;
}
body {
padding: 0% 10% 2% 10%;
}
.nav-link {
color: black;
}
:hover.nav-link {
color: #6B728E;
}
.navigator {
padding: 2% 5% 0% 0%;
}
.blocks {
height: 58%;
}
.mob {
display: none;
}
#media (max-width:400px) {
.mob {
display:block;
}
.blocks {
display:none;
}
}
.new {
height: 85%;
width: 23%;
background: hsl(240, 100%, 5%);
position: absolute;
right: 140px;
padding: 2%;
}
.navelement {
padding-right: 6%;
font-size: 100%;
}
h1 {
color: hsl(35, 77%, 62%);
font-family: 'noto sans';
font-weight: 600;
}
h2 {
color: #fff;
font-size: 23px;
margin-top: 10%;
font-family: 'noto sans';
font-weight: 700;
}
h3 {
color: #6B728E;
font-size: 15px;
padding: 4% 0%;
line-height: 25px;
}
hr {
color: #fff;
border-top: solid white;
}
.tag {
position: absolute;
bottom: 20px;
}
.tagline {
font-family: 'noto sans';
color: #000;
font-weight: 800;
font-size: 60px;
}
.read {
padding: 2% 38%;
position: absolute;
bottom: 54px;
right: -15px;
}
.readline {
font-size: 110%;
color: #6B728E;
line-height: 27px;
}
.button-50 {
height: 49px;
width: 200px;
appearance: button;
background-color: hsl(5, 85%, 63%);
background-image: none;
border: 1px solid #000;
border-radius: 4px;
box-shadow: #B73E3E 4px 4px 0 0, #000 4px 4px 0 1px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: "Montserrat";
font-size: 18px;
font-weight: 400;
line-height: 20px;
margin: 20% 5% 10% 0%;
overflow: visible;
padding: 14px 30px;
text-align: center;
text-transform: none;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
vertical-align: middle;
white-space: nowrap;
position: absolute;
bottom: -45px;
right: 45%;
}
.button-50:focus {
text-decoration: none;
}
.button-50:hover {
text-decoration: none;
}
.button-50:active {
box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
outline: 0;
}
.button-50:not([disabled]):active {
box-shadow: #C9BBCF 2px 2px 0 0, #1d1716 2px 2px 0 1px;
transform: translate(2px, 2px);
}
.readmore {
margin: 10% 3% 5% 0;
font-family: 'Poppins';
font-weight: 400;
}
.info {
margin-top: 5%;
margin-left: 10%;
position: absolute;
right: 10%;
}
.infoimg {
width: 315%;
padding: 20%;
}
.infohead1 {
color: #7D9D9C;
}
.infohead2 {
color: #000;
}
.inf {
padding: 30%;
margin-left: 68px;
white-space: nowrap;
}
.hori {
margin-top: 10%;
color: #000;
border-top: solid black;
}
#media (max-width:350px) {
img{
object-fit: cover;
height: 400px;
}
}
#media screen and (max-width:400px) {
.mob {
display: block;
}
}
I have made this site(http://koulick-project.surge.sh/)as a project but cannot make it fully responsive. How to make it responsive, so that it looks good on mobile/tablets. So far, I could make the headings and text responsive. But cannot make the circles for the clock responsive.
Here is my Html file-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Pragmatic Mates s.r.o. - http://pragmaticmates.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="demo/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="demo/css/coming_soon.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" />
<title>JWOC Coming Soon</title>
</head>
<body>
<div class="centerdiv">
<a href="https://www.facebook.com/jwoc2k20" target="_blank">
<i class="fa fa-facebook fa-3x"></i>
</a>
<a href="https://www.linkedin.com/company/jwoc/" target="_blank">
<i class="fa fa-linkedin fa-3x"></i>
</a>
</div>
<div class="section">
<div class="section">
<div id="particles-js">
<break>
<h1 style="color:white"><b>JWOC</b></h1>
<h1 style="color:white"><b> COMMENCING SOON</b></h1>
<hr>
</div>
</div>
</div>
<div class="countdown countdown-container container">
<div class="clock row">
<div class="clock-item clock-days countdown-time-value col-xs-3 col sm-3">
<div class="wrap">
<div class="inner">
<div id="canvas-days" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-days type-time">DAYS</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
<div class="clock-item clock-hours countdown-time-value col-xs-3 col sm-3 ">
<div class="wrap">
<div class="inner">
<div id="canvas-hours" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-hours type-time">HOURS</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
<div class="clock-item clock-minutes countdown-time-value col-xs-3 col sm-3 ">
<div class="wrap">
<div class="inner">
<div id="canvas-minutes" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-minutes type-time">MINUTES</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
<div class="clock-item clock-seconds countdown-time-value col-xs-3 col sm-3 ">
<div class="wrap">
<div class="inner">
<div id="canvas-seconds" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-seconds type-time">SECONDS</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
</div><!-- /.clock -->
<hr>
</div><!-- /.countdown-wrapper -->
<!-- footer section -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="demo/js/kinetic.js"></script>
<script type="text/javascript" src="jquery.final-countdown.js"></script>
<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$('document').ready(function() {
'use strict';
$('.countdown').final_countdown({
'start': 2062139200,
'end': 2088461320,
'now': 2087461319
});
});
</script>
</body>
</html>
Here is my Css file-
*{
margin: 0;
padding: 0;
}
html, body {
background-repeat:no-repeat;
height: 100vh;
overflow:hidden;
}
html {
background-image: url('../img/open.jpeg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
body {
background-color: rgba(44,62,80 , 0.6 );
background-image: url('../img/open1.jpg');
background-position: center;
background-repeat: repeat;
font-family: 'Raleway', 'Arial', sans-serif;
margin: 0;
padding: 0;
height: 100vh;
}
#particles-js
{
z-index: 99999;
height: 500%;
display: flex;
justify-content: center;
align-items: left;
}
.particles-js-canvas-el{
position: absolute;
width: 100%;
height: 100%;
z-index: 99999;
}
h1{
font-size: 70px;
letter-spacing: 15px;
text-align: center;
}
a{
height: 100px;
width: 100px;
border-radius: 50px;
text-align: center;
margin: 10px;
line-height: 110px;
}
a i{
transition: all 0.3s linear;
}
a:hover i{
transform: scale(1.4);
}
.fa-linkedin{
color: #0097e6;
}
.fa-facebook{
color: #3b5998;
}
/*
.countdown-container {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
*/
.clock-item .inner {
height: 0px;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.clock-canvas {
background-color: rgba(255, 255, 255, .1);
border-radius: 50%;
height: 0px;
padding-bottom: 100%;
}
.text {
color: #fff;
font-size: 30px;
font-weight: bold;
margin-top: -50px;
position: absolute;
top: 50%;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
width: 100%;
}
.text .val {
font-size: 50px;
}
.text .type-time {
font-size: 20px;
}
#media only screen and (min-width: 393px) and (max-width: 767px) {
h1{
font-size: 40px;
letter-spacing: 10px;
}
.text {
font-size: 15px;
}
.text .val {
font-size: 15px;
}
.text .type-time {
font-size: 15px;
}
.clock-item .inner {
width: 150%;
}
}
Can anyone please help.
Try using a column break to split up the timer into multiple rows on smaller screen sizes.
https://getbootstrap.com/docs/4.0/layout/grid/#column-breaks
Tablet+
D H M S
Phone
D H
M S
Recently I started learning bootstrap and decided to build a simple page to sum up F1 races. Unfortunately, I've got something seriously mixed up because the image of the race driver and the text with the name of the driver who set the fastest lap goes beyond the div when you resize the browser. I would be grateful if someone pointed out my mistake because I have no idea how to fix it.
Here are the screenshots:
normal browser size
resized_1
resized_2
HTML:
<head>
<title>Najważniejsze wydarzenia F1</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../../css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link rel="stylesheet" href="../../fontello/css/fontello.css" type="text/css"/>
<link rel="stylesheet" href="../../flag-icon-css-master/css/flag-icon.css" type="text/css"/>
<script src="../../raphael-2.1.4.min.js"></script>
<script src="../../justgage.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var g1 = new JustGage({
id: "g1",
relativeGaugeSize: true,
titleFontFamily: "Formula1",
titleFontColor: "black",
valueFontFamily: "Formula1",
value: 9,
min: 0,
max: 10,
decimals: 0,
gaugeWidthScale: 0.6,
customSectors: [{
color : "#13B5EA",
lo : 0,
hi : 2
},{
color : "#4BB97E",
lo : 2,
hi : 4
},{
color : "#FDCB2A",
lo : 4,
hi : 6
},{
color : "#F78934",
lo : 6,
hi : 8
},{
color : "#F25258",
lo : 8,
hi : 10
}]
});
});
</script>
</head>
<body>
<div class="row no-gutters">
<div class="col-sm-2">
<div class="next_prev">
<a href="#">
<i class="icon-left-open" id="navi" title="Poprzedni wyścig"></i>
</a>
</div>
</div>
<div class="col-sm-8">
<div class="header">
<h1>Grand Prix Chin 2016</h1>
<p><i class="icon-clock"></i>08:00
<i class="icon-location"></i>Shanghai International Circuit
<i class="icon-calendar-empty"></i>17.04
<i class="icon-flag-checkered"></i>56 Okrążeń</p>
</div>
</div>
<div class="col-sm-2">
<div class="next_prev">
<a href="#" style="text-decoration: none; underline: none;">
<i class="icon-right-open" id="navi" title="Następny wyścig"></i>
</a>
</div>
</div>
</div>
<div class="col-sm-12 px-0">
<div class="podium">
<img src="../../img/podiums/3_Chiny.jpg" class="img-fluid">
</div>
</div>
<div class="row no-gutters">
<div class="col-sm-12 col-lg-4">
<div class="banner_sub">
<h1>Ocena wyścigu:</h1>
<div id="g1" class="gauge"></div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="banner_sub">
<h1>Kierowca wyścigu:</h1>
<p><img class="dotd img-responsive" src="../../img/dotd/2016/3_Chiny.jpg"></p>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="banner_sub">
<h1>Najszybsze okrążenie:</h1>
<p id="fastest_lap">1:39.824</p>
<p><img src="../../img/fast_lap_head/2016/3_Chiny.png" style="height: 50%;">
<h3>Nico <span style="font-weight:bold;">Hülkenberg</span></h3>Force India</p>
</div>
</div>
</div>
<div class="footer">
<p>2019</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="../../js/bootstrap.min.js"></script>
</body>
CSS:
#font-face{
font-family: Formula1;
src: url('Formula1-Regular.ttf');
}
#font-face{
font-family: Formula1;
font-weight: bold;
src: url('Formula1-Bold.ttf');
}
body{
font-family: Formula1, sans-serif;
color: black;
}
.header h1{
text-align: center;
font-weight: bold;
margin-top: 25px;
font-size: 50px;
}
.header p{
text-align: center;
margin-top: 20px;
margin-bottom: 25px;
}
#navi{
font-size: 60px;
}
.next_prev{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.icon-left-open:hover, .icon-right-open:hover{
color: #f3f3f3;
transition: all 0.2s ease-in-out;
}
.footer{
text-align: center;
}
.banner_sub{
text-align: center;
height: 380px;
padding: 10px;
border-bottom-right-radius: 25px;
border-right: solid 2px #d0d0d2;
border-bottom: solid 2px #d0d0d2;
margin-top: 10px;
}
.banner_sub:hover{
border-right: solid 2px #e10600;
border-bottom: solid 2px #e10600;
}
.gauge{
width: 100%;
height: 100%;
margin-top: -70px;
}
#fastest_lap{
color: purple;
font-size: 40px;
margin-bottom: 0;
font-weight: bold;
}
.dotd{
border-radius: 20px;
margin-top: 35px;
width: 60%;
}
#font-face{
font-family: Formula1;
src: url('Formula1-Regular.ttf');
}
#font-face{
font-family: Formula1;
font-weight: bold;
src: url('Formula1-Bold.ttf');
}
body{
font-family: Formula1, sans-serif;
color: black;
}
.header h1{
text-align: center;
font-weight: bold;
margin-top: 25px;
font-size: 50px;
}
.header p{
text-align: center;
margin-top: 20px;
margin-bottom: 25px;
}
#navi{
font-size: 60px;
}
.next_prev{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.icon-left-open:hover, .icon-right-open:hover{
color: #f3f3f3;
transition: all 0.2s ease-in-out;
}
.footer{
text-align: center;
}
.banner_sub{
text-align: center;
height: 380px;
padding: 10px;
border-bottom-right-radius: 25px;
border-right: solid 2px #d0d0d2;
border-bottom: solid 2px #d0d0d2;
margin-top: 10px;
}
.banner_sub:hover{
border-right: solid 2px #e10600;
border-bottom: solid 2px #e10600;
}
.gauge{
width: 100%;
height: 100%;
margin-top: -70px;
}
#fastest_lap{
color: purple;
font-size: 40px;
margin-bottom: 0;
font-weight: bold;
}
.dotd{
border-radius: 20px;
margin-top: 35px;
width: 60%;
}
<head>
<title>Najważniejsze wydarzenia F1</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../../css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link rel="stylesheet" href="../../fontello/css/fontello.css" type="text/css"/>
<link rel="stylesheet" href="../../flag-icon-css-master/css/flag-icon.css" type="text/css"/>
<script src="../../raphael-2.1.4.min.js"></script>
<script src="../../justgage.js"></script>
</head>
<body>
<div class="row no-gutters">
<div class="col-sm-2">
<div class="next_prev">
<a href="#">
<i class="icon-left-open" id="navi" title="Poprzedni wyścig"></i>
</a>
</div>
</div>
<div class="col-sm-8">
<div class="header">
<h1>Grand Prix Chin 2016</h1>
<p><i class="icon-clock"></i>08:00
<i class="icon-location"></i>Shanghai International Circuit
<i class="icon-calendar-empty"></i>17.04
<i class="icon-flag-checkered"></i>56 Okrążeń</p>
</div>
</div>
<div class="col-sm-2">
<div class="next_prev">
<a href="#" style="text-decoration: none; underline: none;">
<i class="icon-right-open" id="navi" title="Następny wyścig"></i>
</a>
</div>
</div>
</div>
<div class="col-sm-12 px-0">
<div class="podium">
<img src="https://lh3.googleusercontent.com/-1FzuZdh0Ec8/Xy6JOVeLMzI/AAAAAAAAD5Q/qvuhsNEFGQ46HWItzqbe7alwRnKVkSZXgCK8BGAsYHg/s0/2020-08-08.png" class="img-fluid">
</div>
</div>
<div class="row no-gutters">
<div class="col-sm-12 col-lg-4">
<div class="banner_sub">
<h1>Ocena wyścigu:</h1>
<img src="https://lh3.googleusercontent.com/-8G2bsRRxhTU/Xy6CKatoxFI/AAAAAAAAD5E/eHIxj438C0oRwTZQ33qs0qQW2VIj09nVwCK8BGAsYHg/s0/2020-08-08.png" class="img-fluid">
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="banner_sub clearfix">
<h1>Kierowca wyścigu:</h1>
<p><img class="dotd img-responsive" src="https://lh3.googleusercontent.com/-WLMLKp68bNI/Xy6BYeXRAdI/AAAAAAAAD48/Ffl7HUCROhgQAZr9UnHaRHfm1Ls9HfnFgCK8BGAsYHg/s0/2020-08-08.png"></p>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="banner_sub clearfix">
<h1>Najszybsze okrążenie:</h1>
<p id="fastest_lap">1:39.824</p>
<p><img src="https://lh3.googleusercontent.com/-kAUGg3URGS4/Xy6BVTVSwLI/AAAAAAAAD44/KnjWX9p1kzoof-6ok7aPwyXywQMJon3OQCK8BGAsYHg/s0/2020-08-08.png" style="height: 50%;">
<h3>Nico <span style="font-weight:bold;">Hülkenberg</span></h3>Force India</p>
</div>
</div>
</div>
<div class="footer">
<p>2019</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="../../js/bootstrap.min.js"></script>
</body>
With out bootstrap the nav bar works perfectly fine, but when I activate bootstrap the nav bar gets buggy.
Here is how it should look:
Here is how it looks with bootstrap:
I think there is something that needs an !important added to it, but I'm not sure what so please can someone with experience tell me which one?
I tried inline-flex as well but still no hope
I tried !important with the width but still doesn't work
I tried height: 0%!important; and still nothing work
I need to use bootstrap to have the table with bootstrap design so removing bootstrap is no option.
ok so I'm not sure if there's another problem like this but can't seem to find an answer so here is my code:
html {
scroll-behavior: smooth;
}
#extra space {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#section2 {
color: #fff;
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
background-size: 125% auto;
}
#section2 header {
margin: 0 0 2em 0;
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
position: sticky;
top: 0;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 12vh;
background-color: #0c0c0c;
overflow: auto;
}
.logo {
color: whitesmoke;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 22px;
}
.nav-links {
display: flex!important;
justify-content: space-around!important;
width: 100%!important;
}
.nav-links li {
list-style: none;
}
.burger div {
width: 25px;
height: 5px;
background-color: whitesmoke;
margin: 3px;
}
.burger {
display: none;
cursor: pointer;
}
.nav-links a {
color: whitesmoke;
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
}
#media screen and (max-width:1024px) {
.nav-links {
display: inline-flex;
justify-content: space-around;
width: 60%;
}
}
#media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav {
position: fixed;
top: 0;
}
.nav-links {
font-size: 1px;
position: fixed;
right: 0px;
height: 92vh;
top: 0px;
background-color: #0c0c0c;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {}
.burger {
display: block;
position: absolute;
top: 8px;
right: 16px;
}
.nav-active {
transform: translateX(0%);
}
}
#section1 {
background-image: url("background6.png");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-color: black;
}
#section2 {
background-image: url("background image venuto4.jpg");
height: 980px;
width: 100%;
}
#section3 {
background-color: black;
height: 700px;
}
#section4 {
background-color: whitesmoke;
height: 700px;
}
#section5 {
background-color: yellow;
height: 700px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="navmain.css" />
<link rel="stylesheet" href="css/bootstap.css">
<script src="https://kit.fontawesome.com/703d63b52b.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<div class="logo">
<h4>thomas<br> venutu</h4>
</div>
<ul class="nav-links">
<li>home</li>
<li>NextEvent </li>
<li>Music </li>
<li>About </li>
<li>Boooking </li>
</ul>
<div class="burger">
<div class="line2"></div>
<div class="line1"></div>
<div class="line3"></div>
</div>
</nav>
<section id="section1">
</section>
<section id="section2">
<header>
<h1> </h1>
<h2>Next event</h2>
<h3>Venue At:</h3>
<h4>TBA</h4>
</header>
<div id="getting-started">
<div class="container">
<div class="row">
<div class="col-md-4 m-auto offset-lg-3 col-lg-5">
<div class="card">
<div class="card-header">
<div class="card-body">
<table class="table" summary="date and time for the next event">
<tr>
<th>Days</th>
<th>Hours</th>
<th>Minutes</th>
</tr>
<tr>
<td id="day" class="display-4"></td>
<td id="hours" class="display-4"></td>
<td id="minutes" class="display-4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.countdown.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/main2.js"></script>
<!--conection to main.js !-->
</section>
<section id="section3">
<h1>About</h1>
</section>
<section id="section4">
<h1>Music</h1>
<article class="container box style2">
<div class="row gtr-0">
<div class="col-3 col-12-mobile">
<img src="images/venuto/1798697_10202102944072424_1617307970_n.jpg" alt="" title="still in proggress" />
</div>
<div class="col-3 col-12-mobile">
<img src="images/venuto/1898181_10202102918071774_1708501880_n.jpg" alt="" title="still in proggress" />
</div>
<div class="col-3 col-12-mobile">
<img src="images/venuto/1901776_10202102917311755_760656742_n.jpg" alt="" title="still in proggress" />
</div>
<div class="col-3 col-12-mobile">
<img src="images/venuto/10275374_10202690394478317_8154904436564081527_o.jpg" alt="" title="still in proggress" />
</div>
</div>
</article>
</section>
<div id="section5"></div>
<section>
<h1>home</h1>
</section>
<script src="navbarjs.js"></script>
</body>
</html>
edit:
the answer is you need to do a bootstrap nav_bar
the good thing if you search in the answers bellow you find my accepted answer as a good navbar
The issue is with your structure as bootstrap have its own nav structure so you need to follow that.
I just change the nav with the bootstrap nav and added you links
html{
scroll-behavior: smooth;
}
#extra space{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.navbar-nav {
justify-content: space-around;
width: 100%;
}
#section2 {
color: #fff;
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
background-size: 125% auto;
}
#section2 header {
margin: 0 0 2em 0;
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav{
position:sticky;
top:0;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 12vh;
background-color: #0c0c0c;
overflow: auto;
}
.logo{
color:whitesmoke;
text-transform: uppercase;
letter-spacing: 5px;
font-size:22px;
}
.nav-links{
display:flex!important;
justify-content: space-around!important;
width: 100%!important;
}
.nav-links li{
list-style: none;
}
.burger div{
width: 25px;
height: 5px;
background-color:whitesmoke;
margin:3px;
}
.burger{
display:none;
cursor: pointer;
}
.nav-links a{
color:whitesmoke;
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
}
#media screen and (max-width:1024px){
.nav-links{
display:inline-flex;
justify-content: space-around;
width: 60%;
}
}
#media screen and (max-width:768px){
body{
overflow-x:hidden;
}
.nav{
position: fixed;
top: 0;
}
.nav-links{
font-size: 1px;
position:fixed;
right:0px;
height:92vh;
top: 0px;
background-color: #0c0c0c;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
}
.burger{
display: block;
position: absolute;
top: 8px;
right: 16px;
}
.nav-active{
transform: translateX(0%);
}
}
#section1 {
background-image: url("background6.png");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-color:black;
}
#section2 {
background-image:url("background image venuto4.jpg");
height: 980px;
width: 100%;
}
#section3 {
background-color: black;
height: 700px;
}
#section4 {
background-color: whitesmoke;
height: 700px;
}
#section5 {
background-color: yellow;
height: 700px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="navmain.css" />
<link rel="stylesheet" href="css/bootstap.css">
<script src="https://kit.fontawesome.com/703d63b52b.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#"><div class="logo">
<h4>thomas<br> venutu</h4>
</div></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">NextEvent</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index">Music</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index">Boooking</a>
</li>
</ul>
</div>
</nav>
<section id="section1">
</section>
<section id="section2">
<header>
<h1> </h1>
<h2>Next event</h2>
<h3>Venue At:</h3>
<h4>TBA</h4>
</header>
<div id="getting-started">
<div class="container">
<div class="row">
<div class="col-md-4 m-auto offset-lg-3 col-lg-5">
<div class="card">
<div class="card-header">
<div class="card-body">
<table class="table" summary="date and time for the next event">
<tr>
<th>Days</th>
<th>Hours</th>
<th>Minutes</th>
</tr>
<tr>
<td id="day" class="display-4"></td>
<td id="hours" class="display-4"></td>
<td id="minutes" class="display-4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.countdown.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/main2.js"></script> <!--conection to main.js !-->
</section>
<section id="section3">
<h1>About</h1>
</section>
<section id="section4">
<h1>Music</h1>
<article class="container box style2">
<div class="row gtr-0">
<div class="col-3 col-12-mobile"><img src="images/venuto/1798697_10202102944072424_1617307970_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1898181_10202102918071774_1708501880_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1901776_10202102917311755_760656742_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/10275374_10202690394478317_8154904436564081527_o.jpg" alt="" title="still in proggress" /></div>
</div>
</article>
</section>
<div id="section5"></div>
<section>
<h1>home</h1>
</section>
<script src="navbarjs.js"></script>
</body>
</html>
Try this
html{
scroll-behavior: smooth;
}
#extra space{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#section2 {
color: #fff;
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
background-size: 125% auto;
}
#section2 header {
margin: 0 0 2em 0;
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.header {
position:sticky;
top:0;
min-height: 12vh;
background-color: #0c0c0c;
}
.logo{
color:whitesmoke;
text-transform: uppercase;
letter-spacing: 5px;
font-size:22px;
}
.nav-links{
display:flex!important;
justify-content: space-around!important;
width: 100%!important;
}
.nav-links li{
list-style: none;
}
.burger div{
width: 25px;
height: 5px;
background-color:whitesmoke;
margin:3px;
}
.burger{
display:none;
cursor: pointer;
}
.nav-links a{
color:whitesmoke;
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
}
#media screen and (max-width:1024px){
.nav-links{
display:inline-flex;
justify-content: space-around;
width: 60%;
}
}
#media screen and (max-width:768px){
body{
overflow-x:hidden;
}
.nav{
position: fixed;
top: 0;
}
.nav-links{
font-size: 1px;
position:fixed;
right:0px;
height:92vh;
top: 0px;
background-color: #0c0c0c;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
}
.burger{
display: block;
position: absolute;
top: 8px;
right: 16px;
}
.nav-active{
transform: translateX(0%);
}
}
#section1 {
background-image: url("background6.png");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-color:black;
}
#section2 {
background-image:url("background image venuto4.jpg");
height: 980px;
width: 100%;
}
#section3 {
background-color: black;
height: 700px;
}
#section4 {
background-color: whitesmoke;
height: 700px;
}
#section5 {
background-color: yellow;
height: 700px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="navmain.css" />
<link rel="stylesheet" href="css/bootstap.css">
<script src="https://kit.fontawesome.com/703d63b52b.js" crossorigin="anonymous"></script>
</head>
<body>
<header class="header d-flex align-items-center container-fluid">
<div class="row align-items-center flex-grow-1">
<div class="col-auto">
<div class="logo">
<h4>thomas<br> venutu</h4>
</div>
</div>
<div class="col">
<nav>
<ul class="nav-links">
<li>home</li>
<li>NextEvent </li>
<li>Music </li>
<li>About </li>
<li>Boooking </li>
</ul>
<div class="burger">
<div class="line2"></div>
<div class="line1"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</div>
</header>
<section id="section1">
</section>
<section id="section2">
<header>
<h1> </h1>
<h2>Next event</h2>
<h3>Venue At:</h3>
<h4>TBA</h4>
</header>
<div id="getting-started">
<div class="container">
<div class="row">
<div class="col-md-4 m-auto offset-lg-3 col-lg-5">
<div class="card">
<div class="card-header">
<div class="card-body">
<table class="table" summary="date and time for the next event">
<tr>
<th>Days</th>
<th>Hours</th>
<th>Minutes</th>
</tr>
<tr>
<td id="day" class="display-4"></td>
<td id="hours" class="display-4"></td>
<td id="minutes" class="display-4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.countdown.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/main2.js"></script> <!--conection to main.js !-->
</section>
<section id="section3">
<h1>About</h1>
</section>
<section id="section4">
<h1>Music</h1>
<article class="container box style2">
<div class="row gtr-0">
<div class="col-3 col-12-mobile"><img src="images/venuto/1798697_10202102944072424_1617307970_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1898181_10202102918071774_1708501880_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1901776_10202102917311755_760656742_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/10275374_10202690394478317_8154904436564081527_o.jpg" alt="" title="still in proggress" /></div>
</div>
</article>
</section>
<div id="section5"></div>
<section>
<h1>home</h1>
</section>
<script src="navbarjs.js"></script>
</body>
</html>
I have the following snippet
.striped {
height : 30px;
margin-right: 1px !important;
background: repeating-linear-gradient(-45deg,#E4003D,#E4003D 10px,#222 10px,#222 20px)!important;
}
.content{
height : 100%;
}
.mymedia {
font-size: 1.5vh !important;
color: #fff;
text-align: justify;
-ms-text-justify: inter-word;
text-justify: inter-word;
border-color: #E4003D;
font-weight: normal !important;
background-color:#363636 !important;
background: repeating-linear-gradient( -45deg, #111 2px, #222 3px, #222 4px, #111 7px)!important;
}
.rightpadding{
margin-right: 1px !important;
}
.top-buffer {
margin-top:13px;
overflow: hidden;
}
.bottom {
vertical-align: bottom;
bottom: 0 !important;
}
.nolrpadding{
padding-left: 0 !important;
padding-right: 0 !important;
}
.mymedia > p {
margin-left: 5vw !important;
margin-right: 5vw !important;
}
* {
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
}
.square-box{
position: relative;
width: 95%;
overflow: hidden;
font-size: 2vh !important;
font-weight: bold !important;
background: repeating-linear-gradient( -45deg, #E4003D 2px, #D6003D 3px, #D6003D 4px, #E4003D 7px)!important;
}
.square-box:before{
content: "";
display: block;
padding-top: 100%;
}
.square-content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
}
.square-content div {
display: table;
width: 100%;
height: 100%;
}
.square-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white;
}
.noRightMargin {
margin-right: 0 !important;
}
.noLeftMargin {
margin-left: 0 !important;
}
.row [class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.row{
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row" style="margin-top:5%; margin-bottom: 10px;">
</div>
<div class="row">
<div class="col-xs-5">
<!-- <div class="row rightpadding"> -->
<div class="row striped"></div>
<div class="row rightpadding">
<div class="media mymedia">
<img src="images/Mission/cluster.png" class="img-responsive">
<p>
asas
</p>
</div>
</div>
<div class="row striped bottom"></div>
<!-- </div> -->
</div>
<div class="col-xs-7">
<div class="row noRightMargin">
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="http://sky.esa.int/" data-internal="false">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="https://twitter.com/ESAscience" data-internal="false">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="#" data-internal="false">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
</div>
<div class="row top-buffer noRightMargin">
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="http://helioviewer.org/" data-internal="true">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="EXE" data-prog=" O:\Projects\xdisk\projects\ESAC-SOSR\Work\WP1000 - Visualization tool\wwt-windows-client\WWTExplorer3d\bin\gaiasandbox\gaiasandbox.exe" data-args="scripts\tests\Rosetta.py">
<div class="square-content"><div><span>xxx</span></div></div></a>
</div>
</div>
</div>
</div>
<!-- <div class="col-xs-3"></div> -->
</div>
</div>
</html>
the problem that I have is the bottom alignments in the two columns, as shown in the image
I have seen fixes for column vertical alignments but it seems that they do not work here, so how can I align the bottom of the three rows within the first column with the next column?
thanks in advance,
es.
UPDATE
I would like it to look something like this with the bottom strip row being vertically aligned with the bottom of the red box.
managed to do what you wanted with just a little jq . hope you don't mind
check here jsfiddle
css code added : .mymedia { height:100%;}
jq code added :
var result = $(".col-xs-7").height() - $(".row.striped").height()*2
$(".row.rightpadding").height(result)
result = height of the right col - the heights of both striped rows ( which are equal i presume )
then add that height to the middle row ( .row.rightpadding )
let me know if it helps.
You should be able to achieve what you want by using absolute positioning, with fixed top and bottom so that the left column elements are "snapped" to the height of the row.
Try the snippet below.
.striped {
height: 30px;
background: repeating-linear-gradient(-45deg, #E4003D, #E4003D 10px, #222 10px, #222 20px)!important;
position: absolute;
left: 0;
right: 15px;
}
.content {
height: 100%;
}
.mymedia {
font-size: 1.5vh !important;
color: #fff;
text-align: justify;
-ms-text-justify: inter-word;
text-justify: inter-word;
border-color: #E4003D;
font-weight: normal !important;
background-color: #363636 !important;
background: repeating-linear-gradient( -45deg, #111 2px, #222 3px, #222 4px, #111 7px)!important;
top: 30px;
bottom: 30px;
left: 0;
right: 15px;
position: absolute;
margin-top: 0 !important;
}
.top-buffer {
margin-top: 13px;
overflow: hidden;
}
.bottom {
bottom: 0 !important;
}
.nolrpadding {
padding-left: 0 !important;
padding-right: 0 !important;
}
.mymedia > p {
margin-left: 5vw !important;
margin-right: 5vw !important;
}
* {
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
}
.square-box {
position: relative;
width: 95%;
overflow: hidden;
font-size: 2vh !important;
font-weight: bold !important;
background: repeating-linear-gradient( -45deg, #E4003D 2px, #D6003D 3px, #D6003D 4px, #E4003D 7px)!important;
}
.square-box:before {
content: "";
display: block;
padding-top: 100%;
}
.square-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
}
.square-content div {
display: table;
width: 100%;
height: 100%;
}
.square-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white;
}
.noRightMargin {
margin-right: 0 !important;
}
.noLeftMargin {
margin-left: 0 !important;
}
.row {
overflow: hidden;
position: relative;
}
.myLeftCol {
bottom: 0;
padding-left: 0 !important;
position: absolute !important;
top: 0;
}
.myRightCol {
margin-left: 41.6667%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row" style="margin-top:5%; margin-bottom: 10px;">
</div>
<div class="row">
<div class="col-xs-5 myLeftCol">
<div class="striped"></div>
<div class="media mymedia">
<img src="images/Mission/cluster.png" class="img-responsive">
<p>
asas
</p>
</div>
<div class="striped bottom"></div>
</div>
<div class="col-xs-7 myRightCol">
<div class="row noRightMargin">
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="http://sky.esa.int/" data-internal="false">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="https://twitter.com/ESAscience" data-internal="false">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="#" data-internal="false">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="row top-buffer noRightMargin">
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="http://helioviewer.org/" data-internal="true">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-4 nolrpadding">
<div class='square-box'>
<a href="EXE" data-prog=" O:\Projects\xdisk\projects\ESAC-SOSR\Work\WP1000 - Visualization tool\wwt-windows-client\WWTExplorer3d\bin\gaiasandbox\gaiasandbox.exe" data-args="scripts\tests\Rosetta.py">
<div class="square-content">
<div><span>xxx</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- <div class="col-xs-3"></div> -->
</div>
</div>
</html>
Wrap everything in a <div>, and set the childs to have min-height: 100%