I'm developing this website for an animal shelter in my city, because the old website is displaying very bad on smaller devices like smartphones.
I made a color gradient with gimp for the part of the HTML.
#image {
position: relative;
width: 100%;
/* for IE 6 */
}
#headline {
position: absolute;
top: 0px;
left: 0;
width: 100%;
}
#logo {
position: absolute;
top: 120px;
}
#menu-btn {
position: absolute;
top: 60px;
}
<header id="image">
<img src="bar.png" width="100%" height="100px">
<h3 class="w3-center" id="headline">Tierschutzverein</h3>
<div class="w3-bar" id="menu-btn">
<a class="w3-button w3-bar-item" href="#">Home</a>
<div class="dropdown w3-bar-item">
<span>Zuhause gesucht</span>
<div class="dropdown-content">
<p>Test</p>
</div>
</div>
<a class="w3-button w3-bar-item" href="#">Über uns</a>
<a class="w3-button w3-bar-item" href="#">Links</a>
<a class="w3-button w3-bar-item" href="#">Kontakt</a>
<a class="w3-button w3-bar-item" href="#">Pension</a>
</div>
</header>
But now there is the problem, that the dropdown content isn't visible below the color gradient. I think it's because of the CSS at #menu-btn.
How can I fix this mistake?
Related
I am using a code from this site: https://codepen.io/tutsplus/pen/rQrVBg to make an image grid with transition whey you touch or move over it shows some text. The transition works fine on PC, but when I was testing on my mobile phone I got the opacity color over a picture. I tested in Safari, Chrome and Edge and doesn't work neither.
body {
padding: 20px;
font-family: sans-serif;
background: #f2f2f2;
}
img {
width: 100%;
/* need to overwrite inline dimensions */
height: auto;
}
h2 {
margin-bottom: .5em;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 1em;
}
/* hover styles */
.location-listing {
position: relative;
}
.location-image {
line-height: 0;
overflow: hidden;
}
.location-image img {
filter: blur(0px);
transition: filter 0.3s ease-in;
transform: scale(1.1);
}
.location-title {
font-size: 1.5em;
font-weight: bold;
text-decoration: none;
z-index: 1;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
background: rgba(90, 0, 10, 0.4);
color: white;
/* position the text in t’ middle*/
display: flex;
align-items: center;
justify-content: center;
}
.location-listing:hover .location-title {
opacity: 1;
}
.location-listing:hover .location-image img {
filter: blur(2px);
}
/* for touch screen devices */
#media (hover: none) {
.location-title {
opacity: 1;
}
.location-image img {
filter: blur(2px);
}
}
<div class="child-page-listing">
<h2>Our Locations</h2>
<div class="grid-container">
<article id="3685" class="location-listing">
<a class="location-title" href="#">
San Francisco
</a>
<div class="location-image">
<a href="#">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
</a>
</div>
</article>
<article id="3688" class="location-listing">
<a class="location-title" href="#">
London
</a>
<div class="location-image">
<a href="#">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london">
</a>
</div>
</article>
<article id="3691" class="location-listing">
<a class="location-title" href="#">
New York
</a>
<div class="location-image">
<a href="#">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york">
</a>
</div>
</article>
<article id="3694" class="location-listing">
<a class="location-title" href="#">
Cape Town
</a>
<div class="location-image">
<a href="#">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town">
</a>
</div>
</article>
<article id="3697" class="location-listing">
<a class="location-title" href="#">
Beijing
</a>
<div class="location-image">
<a href="#">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/beijing-768x432.jpg" alt="beijing">
</a>
</div>
</article>
<article id="3700" class="location-listing">
<a class="location-title" href="#">
Paris
</a>
<div class="location-image">
<a href="#">
<img width="300" height="169" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/paris-768x432.jpg" alt="paris">
</a>
</div>
</article>
</div>
<!-- end grid container -->
</div>
Since there is no hover effect in mobile browsers (no mouse cursor to move/hover over the images), you can't get the same behaviour on mobile/touchscreen devices.
The media query at the end of the CSS is applying a style to all '.location-title' elements, and a blur to all '.location-image img' elements. These effects will be applied to these regardless of whether the user is interacting with those elements. I'd say in this sample, that's an acceptable fallback behaviour, using the #media query to assign styles to elements in the event the hover capability isn't available in the browser. Your specific solution may need a different approach if you want something more like the desktop behaviour on mobile devices (e.g., CSS rules applied to active elements on a touch event).
I want to make a nav bar in the footer with images. The footer needs to be 10% of the total screen and the images need to be within those 10% as well. Only I don't get the images scale according to the screen size and are way bigger. What am I doing wrong?
I am using Bootstrap 4 and I intent to make a mobile version of my website but it is not displaying good.
<div class="footer navbar row">
<div class="col-sm-2 menu_item">
<a href="#home" class="active">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#news">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#contact">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#contact">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#contact">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
background-color: var(--primary-color-1);
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
margin: 0px;
height: 10vh;
}
/* Style the menu blocks */
.menu_item {
position: relative;
padding: 2px 10px;
margin: 0px;
}
/* Style the links inside the navigation bar */
.navbar a {
float: left;
display: block;
text-align: center;
text-decoration: none;
}
/* Style the images/icons of the links */
.menu_img {
height:100%;
width: 100%;
object-fit: cover;
}
responsive img's need width: 100%; to be responsive, you can control the image size with his container, for example:
<div class="img-container">
<img src="imgUrl"/>
</div>
img{
width: 100%;
}
.img-container{
width: 10%;
}
I found the solution. My structure is like
<div class="footer">
<div>
<a>
<img>
</a>
</div>
</div>
The footer div needs to be height:10%. But I need to set the height of all the other elements to 100%(which I didn't do before). Otherwise it will extend outside those. 'borders'
So, I have this code below with images and a countdown below the images. How do I make all the images the same dimension, but still make it responsive for Bootstrap? I've tried doing min & max height, but the problem still continues. I've tried setting the width & height, but then the image is no longer responsive. I have tried setting the properties for the img-responsive class, but then the image looks all distorted.
Any ideas? I heard about this idea of having the images not being the same dimension, but having the rest of the uneven dimension be filled with the background of the image. Thanks :)
Thanks...
/* Books */
#books_div {
position: absolute;
left: 50%;
top: 25%;
transform: translatex(-50%);
}
#books_text {
position: absolute;
left: 50%;
top: 15%;
transform: translatex(-50%);
}
.description_one, .description_two, .description_three {
color: #9B0103;
max-width: 100%;
text-align: center;
border: 1px solid #9B0103;
border-top: none;
font-weight: bold;
}
.description_one a {
text-decoration: none !important;
}
#book_column a {
text-decoration: none !important;
}
/* End of Books */
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Books -->
<h2 id='books_text'> We Giveaway Free Books </h2>
<div class="row" id='books_div'>
<!-- First Book -->
<div class='col-lg-3 col-sm-6 portfolio-item' id='book_column'>
<a href='#'>
<img class='img-responsive' src='https://images.gr-assets.com/books/1472913234l/29563587.jpg' alt='' id='book_cover_one' token_id='4ce0e43b806457bbc21881748d6a50d2'>
<div class='description_one'>
5:05:12
</div> </a>
</div>
<!-- End of First Book -->
<!-- Second Book -->
<div class='col-lg-3 col-sm-6 portfolio-item' id='book_column'>
<a href='#'>
<img class='img-responsive' src='https://images.gr-assets.com/books/1388211242l/69571.jpg' alt='' id='book_cover_two' token_id='bb8673cb597c7fc7cba7bc13d9f08a4b'>
<div class='description_two'>
6:32:14
</div> </a>
</div>
<!-- End of Second Book -->
<!-- Third Book -->
<div class='col-lg-3 col-sm-6 portfolio-item' id='book_column'>
<a href='#'>
<img class='img-responsive' src='https://images.gr-assets.com/books/1342493368l/3636.jpg' alt='' id='book_cover_three' token_id='25ea7f6c20f1f185841ed88c9a9d2f2c'>
<div class='description_three'>
7:12:04
</div> </a>
</div>
<!-- End of Third Book -->
Just add a min-height to your images to modulate width add width:some%
Working Snippet
/* Books */
#books_div {
position: absolute;
left: 50%;
top: 25%;
transform: translatex(-50%);
}
#books_text {
position: absolute;
left: 50%;
top: 15%;
transform: translatex(-50%);
}
.description_one, .description_two, .description_three {
color: #9B0103;
max-width: 100%;
text-align: center;
border: 1px solid #9B0103;
border-top: none;
font-weight: bold;
}
.description_one a {
text-decoration: none !important;
}
#book_column a {
text-decoration: none !important;
}
.img {
min-height: 300px;
}
/* End of Books */
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Books -->
<h2 id='books_text'> We Giveaway Free Books </h2>
<div class="row" id='books_div'>
<!-- First Book -->
<div class='col-lg-3 col-sm-6 portfolio-item' id='book_column'>
<a href='#'>
<img class='img-responsive img' src='https://images.gr-assets.com/books/1472913234l/29563587.jpg' alt='' id='book_cover_one' token_id='4ce0e43b806457bbc21881748d6a50d2'>
<div class='description_one'>
5:05:12
</div> </a>
</div>
<!-- End of First Book -->
<!-- Second Book -->
<div class='col-lg-3 col-sm-6 portfolio-item' id='book_column'>
<a href='#'>
<img class='img-responsive img' src='https://images.gr-assets.com/books/1388211242l/69571.jpg' alt='' id='book_cover_two' token_id='bb8673cb597c7fc7cba7bc13d9f08a4b'>
<div class='description_two'>
6:32:14
</div> </a>
</div>
<!-- End of Second Book -->
<!-- Third Book -->
<div class='col-lg-3 col-sm-6 portfolio-item' id='book_column'>
<a href='#'>
<img class='img-responsive img' src='https://images.gr-assets.com/books/1342493368l/3636.jpg' alt='' id='book_cover_three' token_id='25ea7f6c20f1f185841ed88c9a9d2f2c'>
<div class='description_three'>
7:12:04
</div> </a>
</div>
<!-- End of Third Book -->
I have code that displays images and a countdown below the images. How do I make all the images the same dimensions but also let Bootstrap be responsive? At the same time, also making sure the countdown box below stays with the dimensions of the images? Thanks :)
/* Books */
#books_div {
position: absolute;
left: 50%;
top: 25%;
transform: translatex(-50%);
}
#books_text {
position: absolute;
left: 50%;
top: 15%;
transform: translatex(-50%);
}
.description_one, .description_two, .description_three {
color: #9B0103;
max-width: 100%;
text-align: center;
border: 1px solid #9B0103;
border-top: none;
font-weight: bold;
}
.description_one a {
text-decoration: none !important;
}
#book_column a {
text-decoration: none !important;
}
/* End of Books */
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Books -->
<h2 id='books_text'> We Giveaway Free Books </h2>
<div class="row" id='books_div'>
<!-- First Book -->
<div class='col-lg-3 col-sm-6 portfolio-item' id='book_column'>
<a href='#'>
<img class='img-responsive' src='https://images.gr-assets.com/books/1472913234l/29563587.jpg' alt='' id='book_cover_one' token_id='4ce0e43b806457bbc21881748d6a50d2'>
<div class='description_one'>
5:05:12
</div> </a>
</div>
<!-- End of First Book -->
<!-- Second Book -->
<div class='col-lg-3 col-sm-6 portfolio-item' id='book_column'>
<a href='#'>
<img class='img-responsive' src='https://images.gr-assets.com/books/1388211242l/69571.jpg' alt='' id='book_cover_two' token_id='bb8673cb597c7fc7cba7bc13d9f08a4b'>
<div class='description_two'>
6:32:14
</div> </a>
</div>
<!-- End of Second Book -->
<!-- Third Book -->
<div class='col-lg-3 col-sm-6 portfolio-item' id='book_column'>
<a href='#'>
<img class='img-responsive' src='https://images.gr-assets.com/books/1342493368l/3636.jpg' alt='' id='book_cover_three' token_id='25ea7f6c20f1f185841ed88c9a9d2f2c'>
<div class='description_three'>
7:12:04
</div> </a>
</div>
<!-- End of Third Book -->
Solution 1
You can add below at the bottom of your css
img[id^="book_cover"]{
width:500px;
height:500px;
}
The above will target all img elements with id that starts with book_cover, example book_cover_one, book_cover_two, etc
See snippet below
/* Books */
#books_div {
position: absolute;
left: 50%;
top: 25%;
transform: translatex(-50%);
}
#books_text {
position: absolute;
left: 50%;
top: 15%;
transform: translatex(-50%);
}
.description_one, .description_two, .description_three {
color: #9B0103;
max-width: 100%;
text-align: center;
border: 1px solid #9B0103;
border-top: none;
font-weight: bold;
}
.description_one a {
text-decoration: none !important;
}
#book_column a {
text-decoration: none !important;
}
img[id^="book_cover"]{
width:500px;
height:500px;
}
/* End of Books */
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Books -->
<h2 id='books_text'> We Giveaway Free Books </h2>
<div class="row" id='books_div'>
<!-- First Book -->
<div class='col-lg-3 col-sm-6 portfolio-item' id='book_column'>
<a href='#'>
<img class='img-responsive' src='https://images.gr-assets.com/books/1472913234l/29563587.jpg' alt='' id='book_cover_one' token_id='4ce0e43b806457bbc21881748d6a50d2'>
<div class='description_one'>
5:05:12
</div> </a>
</div>
<!-- End of First Book -->
<!-- Second Book -->
<div class='col-lg-3 col-sm-6 portfolio-item' id='book_column'>
<a href='#'>
<img class='img-responsive' src='https://images.gr-assets.com/books/1388211242l/69571.jpg' alt='' id='book_cover_two' token_id='bb8673cb597c7fc7cba7bc13d9f08a4b'>
<div class='description_two'>
6:32:14
</div> </a>
</div>
<!-- End of Second Book -->
<!-- Third Book -->
<div class='col-lg-3 col-sm-6 portfolio-item' id='book_column'>
<a href='#'>
<img class='img-responsive' src='https://images.gr-assets.com/books/1342493368l/3636.jpg' alt='' id='book_cover_three' token_id='25ea7f6c20f1f185841ed88c9a9d2f2c'>
<div class='description_three'>
7:12:04
</div> </a>
</div>
<!-- End of Third Book -->
Solution 2
Instead of solution 1, this seems much more simpler
.img-responsive{
width:500px;
height:500px;
}
Try add one more class to yor CSS:
.thumb img {
width: 100%;
height: 300px;
}
This should fix your problem.
I am jumping into a large complex application today and it's a bit daunting.
So, I want to solve the issue locally then find where the solution should eventually be located.
I have square images that come from sources of various sizes. Currently the image fills the div regardless of its dimensions.
<li class="hint-li" data-position="undefined" data-id="551ef3279934asda2e2565" id="551efsfasd8354582e2565" style="background-image: url(http://s3.amazonaws.com/source/558dadasd9a0f3.616asd74.jpg);">
<div class="sold-out hidden">
</div>
<div class="partnered hidden">
</div>
<div class="overlay">
<div class="row">
<div class="col">
<strong>
Thermal bath, aromatherapy, massage
</strong>
<em>
Aire Ancient Bath
</em>
<strong class="hintPrice">
$181
</strong>
</div>
</div>
</div>
<div class="options">
<div class="row">
<div class="col">
<a target="_blank" class="buy" href="http://www.ancientbathsny.com/aire-services/thermal-bath-with-aromatherapy-and-relaxing-30-minutes-massage/">
Buy
</a>
<a target="_blank" class="hint">
Hint
</a>
</div>
<div class="col">
<ul>
<li>
<a class="twitter" target="_blank">
<span class="sprite twitter-alt">
</span>
</a>
</li>
<li>
<a class="facebook" target="_blank">
<span class="sprite facebook-alt">
</span>
</a>
</li>
<li>
<a class="email">
<span class="sprite email">
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
Here is the CSS that effects these image sizes:
.grid>ul>li {
width: 247px;
height: 250px;
background-position: center;
background-size: cover;
display: inline-block;
margin: 0 20px 20px 0;
position: relative;
vertical-align: top;
cursor: pointer;
-webkit-box-shadow: 1px 1px 1px 1px #ddd;
box-shadow: 1px 1px 1px 1px #ddd;
}
I'm trying to center the image within the div and have the remaining space be white space:
I have tried various approaches such as:
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
But it is breaking their format on the page.
How do I get the desired behavior?
As in this JS Fiddle these lines should be in your .grid>ul>li css:
background-position: center center;
background-repeat:no-repeat;
background-size: contain;
background-color:white;
EDIT: My answer is not actually applicable to OP, but I will leave it here in case someone is looking to center img elements as OP described in the title.
Wrap the following class around each img attribute:
.example-wrapper img {
text-align:center;
transform: translateY(-50%);
top: 50%;
height: auto;
max-width: 100%;
max-height:100%;
position: relative;
background-color: white;
}
extra option: "text-align:center;" above can be replaced with:
display: flex;
justify-content:center;
HTML
<div class="example-wrapper">
<img ....>
</div>