I have the following html code and what I am trying to do is to align all the black boxes on the top of the container and make the whole container content responsive so when the window gets smaller if the images do not fit in the container, they move down and align themeselves just like justify content-between to the entire container. I have trouble with the middle image because it has 2 paragraphs bellow it and the black-box gets higher than the others black boxes. Also I am having trouble making it responsive. Can someone please help?
<html lang="el">
<head>
<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">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section>
<div class="container menu-images">
<div class="menu-img-div">
<a href="Publications.html">
<img src="https://i.imgur.com/2YdegoR_d.webp?maxwidth=760&fidelity=grand" class="menu-img" alt="Posts HPV">
<p>TEXT 1</p>
</a>
</div>
<div class="menu-img-div"><a href="Videos.html">
<img src="https://i.imgur.com/2YdegoR_d.webp?maxwidth=760&fidelity=grand" class="menu-img" alt="videos HPV">
<p>TEXT 2</p>
</a>
</div>
<div class="menu-img-div"><a href="Information.html">
<img src="https://i.imgur.com/2YdegoR_d.webp?maxwidth=760&fidelity=grand" class="menu-img" alt="Cheatsheet-Frame HPV">
<p>TEXT 3.1</p>
<p>TEXT 3.2</p>
</a>
</div>
<div class="menu-img-div">
<a href="Poster.html">
<img src="https://i.imgur.com/2YdegoR_d.webp?maxwidth=760&fidelity=grand" class="menu-img" alt="poster HPV">
<p>TEXT 4</p>
</a>
</div>
<div class="menu-img-div">
<a href="Questions.html">
<img src="https://i.imgur.com/2YdegoR_d.webp?maxwidth=760&fidelity=grand" class="menu-img" alt="Συχνές-ερωτήσεις HPV">
<p>TEXT 5</p>
</a>
</div>
</div>
</section>
</body>
</html>
Also here is my css
.menu-img-div {
display: inline-block;
}
.menu-images {
max-width: 1324px;
}
If this is how the container looks on desktop:
IMGUR
and on mobile:
IMGUR
then why don't you just use the grid system? (https://getbootstrap.com/docs/5.0/layout/grid/) it's much easier:
<div class="container">
<div class="row">
<div class="col col-12 col-md-4">
<p>Content</p>
</div>
<div class="col col-12 col-md-4">
<p>Content</p>
</div>
<div class="col col-12 col-md-4">
<p>Content</p>
</div>
</div>
</div>
Related
I have this code
https://jsfiddle.net/kxrmcpzn/
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Landing Page</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!-- Place favicon.ico in the root directory -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
</head>
<style type="text/css" media="screen">
.flex-even {
flex: 1;
}
.hero,
.navbar {
background-color: #1f2937;
color: #f9faf8;
}
</style>
<body>
<div class="container">
<div class="navbar">
<div class="logo">Header Logo</div>
<div class="navbar-items">
header link one
header link two
header link three
</div>
</div>
<div class="hero d-flex">
<div class="flex-even">
<h1>This website is awesome</h1>
<p>
This website has some subtext that goes here under the main title.
It's a smaller font and the color is lower contrast
</p>
<button class="btn btn-primary">Sign up</button>
</div>
<div class="flex-even">
<img src="https://via.placeholder.com/350x150" />
</div>
</div>
<div>
<h2 class="fw-bold text-center">Some random information</h2>
<div class="d-flex">
<div>
<img src="https://via.placeholder.com/150" alt="" />
<p>this is some subtext under an illustration or image</p>
</div>
<div>
<img src="https://via.placeholder.com/150" alt="" />
<p>this is some subtext under an illustration or image</p>
</div>
<div>
<img src="https://via.placeholder.com/150" alt="" />
<p>this is some subtext under an illustration or image</p>
</div>
<div>
<img src="https://via.placeholder.com/150" alt="" />
<p>this is some subtext under an illustration or image</p>
</div>
</div>
</div>
<div>
<p>
This is an inspiring quote, or a testimonial from a customer. Maybe
it's just filling up space, or maybe people will actually read it. Who
knows? All I know is that it looks nice.
</p>
<p class="fw-bold">-Thor, God of Thunder</p>
</div>
<div class="d-flex bg-primary text-white p-3 rounded">
<div>
<p class="fw-bold">Call to action! It's time!</p>
<p>
Sign up for our product by clicking that button right over there
</p>
</div>
<div>
<button class="btn btn-light">Sign up</button>
</div>
</div>
</div>
</body>
</html>
I want the width of each element inside outer div is full page width 100% like this
https://cdn.statically.io/gh/TheOdinProject/curriculum/main/foundations/html_css/project/odin-project.png
I try using class container-fluid but the text will not be inside container
You could combine container-fluid and container:
<div class="container-fluid navbar">
<div class="container">
...
</div>
</div>
Explanation
I'm using Bulma to create a divided page with a fixed Navbar, but as you can see below, Title 1 and Title 2 won't line up with Navbar and Title 3, since the container left/right margin is set to auto and, therefore, goes to 0 in this first section configuration. Is there any way to achieve this using Bulma?
The problem starts happening in 1024px or higher.
Code
I've changed the container background color to yellow so it's easier to see the issue.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.0/css/bulma.min.css" />
</head>
<style>
.container {
background-color: yellow;
}
</style>
<body>
<nav class="navbar is-fixed-top" role="navigation" style="background-color: transparent;">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" />
</a>
</div>
</div>
</nav>
<section class="columns is-vcentered is-gapless mb-0">
<div class="column">
<div class="hero is-fullheight is-info">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-dark">
Title 1
</h1>
</div>
</div>
</div>
</div>
<div class="column">
<div class="hero is-fullheight is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-dark">
Title 2
</h1>
</div>
</div>
</div>
</div>
</section>
<section class="hero is-fullheight is-success">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-dark">
Title 3
</h1>
</div>
</div>
</section>
</body>
I am trying to show or hide a div while I hover over a specific figure item. To be specific: what I try to achieve is the following:
When I hover on button #1, then I want to show the div with the text for button 1;
When I hover on button #2, then I want to show the div with the text for button 2;
and so on...
First of all, I tried to reproduce a simple example (this example is working):
<!DOCTYPE html>
<html>
<head>
<style>
.hide {
display: none;
}
.myDIV:hover + .hide {
display: block;
color: red;
}
</style>
</head>
<body>
<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when someone hovers over the div above.</div>
</body>
</html>
However, I am not able to make this work on my end. Does anyone have an idea how I can apply this example to the HTML structure below? FYI: the classes in this script are used as dummies to describe what I try to achieve.
<div>
<div>
<section>
<figure>
<i class="hover pin 1">1</i>
<i class="hover pin 2">2</i>
<i class="hover pin 3">3</i>
<i class="hover pin 4">4</i>
</figure>
</section>
</div>
<div class="hide when not equal to hover item 1">
<h3>Text item 1</h3>
</div>
<div class="hide when not equal to hover item 2">
<h3>Text item 2</h3>
</div>
<div class="hide when not equal to hover item 3">
<h3>Text item 3</h3>
</div>
<div class="hide when not equal to hover item 4">
<h3>Text item 4</h3>
</div>
</div>
Kind regards,
Joris
Whilst I imagine you could use purely CSS for the purpose of this, it's much easier to put JS into practice to reach the desired result.
The below snippet highlights the use of an in-line JavaScript solution utilizing onmouseover and onmouseout.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.PinDiv{
display: none;
}
</style>
</head>
<body>
<div>
<div>
<section>
<figure>
<i class="HoverPin" onmouseover="document.getElementById('PinDiv1').style.display='block';" onmouseout="document.getElementById('PinDiv1').style.display='none';">1</i>
<i class="HoverPin" onmouseover="document.getElementById('PinDiv2').style.display='block';" onmouseout="document.getElementById('PinDiv2').style.display='none';">2</i>
<i class="HoverPin" onmouseover="document.getElementById('PinDiv3').style.display='block';" onmouseout="document.getElementById('PinDiv3').style.display='none';">3</i>
<i class="HoverPin" onmouseover="document.getElementById('PinDiv4').style.display='block';" onmouseout="document.getElementById('PinDiv4').style.display='none';">4</i>
</figure>
</section>
</div>
<div id="PinDiv1" class="PinDiv">
<h3>Text item 1</h3>
</div>
<div id="PinDiv2" class="PinDiv">
<h3>Text item 2</h3>
</div>
<div id="PinDiv3" class="PinDiv">
<h3>Text item 3</h3>
</div>
<div id="PinDiv4" class="PinDiv">
<h3>Text item 4</h3>
</div>
</div>
</body>
</html>
Using JQuery we can clean this up somewhat:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.PinDiv{
display: none;
}
</style>
</head>
<body>
<div>
<div>
<section>
<figure>
<i class="HoverPin" onmouseover="$('#PinDiv1').css('display','block');" onmouseout="$('#PinDiv1').css('display','none');">1</i>
<i class="HoverPin" onmouseover="$('#PinDiv2').css('display','block');" onmouseout="$('#PinDiv2').css('display','none');">2</i>
<i class="HoverPin" onmouseover="$('#PinDiv3').css('display','block');" onmouseout="$('#PinDiv3').css('display','none');">3</i>
<i class="HoverPin" onmouseover="$('#PinDiv4').css('display','block');" onmouseout="$('#PinDiv4').css('display','none');">4</i>
</figure>
</section>
</div>
<div id="PinDiv1" class="PinDiv">
<h3>Text item 1</h3>
</div>
<div id="PinDiv2" class="PinDiv">
<h3>Text item 2</h3>
</div>
<div id="PinDiv3" class="PinDiv">
<h3>Text item 3</h3>
</div>
<div id="PinDiv4" class="PinDiv">
<h3>Text item 4</h3>
</div>
</div>
</body>
</html>
If you wanted them to stay open, you could do something like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.PinDiv{
display: none;
}
</style>
</head>
<body>
<div>
<div>
<section>
<figure>
<i class="HoverPin" onmouseover="$('#PinDiv1').css('display','block');" onmouseout="$('.PinDiv:not(#PinDiv1)').css('display','none');">1</i>
<i class="HoverPin" onmouseover="$('#PinDiv2').css('display','block');" onmouseout="$('.PinDiv:not(#PinDiv2)').css('display','none');">2</i>
<i class="HoverPin" onmouseover="$('#PinDiv3').css('display','block');" onmouseout="$('.PinDiv:not(#PinDiv3)').css('display','none');">3</i>
<i class="HoverPin" onmouseover="$('#PinDiv4').css('display','block');" onmouseout="$('.PinDiv:not(#PinDiv4)').css('display','none');">4</i>
</figure>
</section>
</div>
<div id="PinDiv1" class="PinDiv">
<h3>Text item 1</h3>
</div>
<div id="PinDiv2" class="PinDiv">
<h3>Text item 2</h3>
</div>
<div id="PinDiv3" class="PinDiv">
<h3>Text item 3</h3>
</div>
<div id="PinDiv4" class="PinDiv">
<h3>Text item 4</h3>
</div>
</div>
</body>
</html>
You can try this quick css trick to achive what you need :)
CSS:
.hoverable:not(:hover) + .show-on-hover {
display: none;
}
HTML:
<div style="display: flex">
<i class="hover pin 1">1
<div class="hide">
<h3>Text item 1</h3>
</div>
</i>
<i class="hover pin 2">2
<div class="hide">
<h3>Text item 2</h3>
</div>
</i>
<i class="hover pin 3">3
<div class="hide">
<h3>Text item 3</h3>
</div>
</i>
<i class="hover pin 4">4
<div class="hide">
<h3>Text item 4</h3>
</div>
</i>
</div>
.hide {
display: none;
}
i:hover > .hide {
display: block;
}
<div style="display: flex">
<i class="hover pin 1">1
<div class="hide">
<h3>Text item 1</h3>
</div>
</i>
<i class="hover pin 2">2
<div class="hide">
<h3>Text item 2</h3>
</div>
</i>
<i class="hover pin 3">3
<div class="hide">
<h3>Text item 3</h3>
</div>
</i>
<i class="hover pin 4">4
<div class="hide">
<h3>Text item 4</h3>
</div>
</i>
</div>
Hope it helps!
If you don't want to use JS (the other answer posted will work), you can use the :target selector. The caveat is the user will need to click on the element.
div.text {
display: none;
}
div:target {
display: block;
}
.pin {
margin-left: 15px;
}
<div>
<div>
<section>
<figure>
<a href="#text1" class="pin">1</i>
<a href="#text2" class="pin">2</i>
<a href="#text3" class="pin">3</i>
<a href="#text4" class="pin">4</i>
</figure>
</section>
</div>
<div class="text" id="text1">
<h3>Text item 1</h3>
</div>
<div class="text" id="text2">
<h3>Text item 2</h3>
</div>
<div class="text" id="text3">
<h3>Text item 3</h3>
</div>
<div class="text" id="text4">
<h3>Text item 4</h3>
</div>
</div>
I have an img nested in a col. However, the col is larger than the image. It's as if there is padding at the bottom, but I don't see any. Here is a screenshot: https://imgur.com/a/K8iRWLf
There is another img nested within a separate col in the same row, but that img is the exact same size.
EDIT* I tried two fixes per a suggestion: display: block and vertical-align: bottom (separately), neither of which worked.
.img-shrink {
max-width: 80%;
max-height: 80%;
}
<div class="row justify-content-center">
<div class="col-3 body-padding text-center">
<img class="img-fluid img-shrink" src="img/dog-beer.jpg" alt="beer">
</div>
<div class="col-3 body-padding text-center">
<img class="img-fluid img-shrink" src="img/dog-treats.jpg" alt="treats">
</div>
</div>
<div class="row justify-content-center">
<div class="col-2 align-text-top">
<h4 class="product-header">Lorem Ipsum</h4>
</div>
<div class="col-2 align-text-top">
<h4 class="product-header">Lorem Ipsum</h4>
</div>
</div>
After playing around, I figured it out. The col is sized to the actual size of my image, not the max-width/height: 80% image that the browser renders. If anyone knows a way around this without resizing the original image, please enlighten me.
Try this once and see if it works
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div class="row justify-content-center">
<div class="col-3">
<img class="img-fluid" src="img.jpg" alt="beer">
</div>
<div class="col-3">
<img class="img-fluid" src="image.jpg" alt="treats">
</div>
</div>
<div class="row justify-content-center">
<div class="col-3 align-text-top text-center">
<h4 class="product-header">Lorem Ipsum</h4>
</div>
<div class="col-3 align-text-top text-center">
<h4 class="product-header">Lorem Ipsum</h4>
</div>
</div>
</body>
</html>
I am trying to create a simple grid using cards. I am using ng-repeat to create cards. The problem is there is no spacing between each card as shown
I am using the below code
<!DOCTYPE html>
<html lang="en" ng-app="movieflix">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="catalogcontroller">
<div class="row" >
<div dir-paginate="user in users|itemsPerPage:16">
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card card-block ">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="http://ia.media-imdb.com/images/M/MV5BMTU4MDU3NDQ5Ml5BMl5BanBnXkFtZTgwOTU5MDUxNTE#._V1_SX300.jpg", class="img-fluid" alt="">
<a>
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Social shares button-->
<!--Title-->
<h4 class="card-title">Card title</h4>
<hr>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="d-flex flex-row-reverse">
<h5 class="waves-effect waves-light p-2">Read more <i class="fa fa-chevron-right"></i>
</h5>
</a>
</div>
<!--/.Card content-->
</div>
</div>
</div>
</div>
<dir-pagination-controls
max-size="5"
direction-links="false"
boundary-links="false" >
</dir-pagination-controls>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="js/dirPagination.js"></script>
<script src="js/movieflix.module.js"></script>
<script src="js/catalog.controller.js"></script>
</body>
</html>
Can someone tell me what is wrong with my code.
Really appreciate any suggestions.
Thanks in advance
The card class works perfectly well. Your images are too wide. Change your image class from img-fluid to img-responsive and it should work.
At least it does on this fiddle.
Add space between the cards:
.card {
margin-right: 10px;
}
.card:last-of-type {
margin-right: 0;
}