I created an image overlay effect for my portfolio page complete with custom CSS. It is working perfectly fine on a desktop browser but it's completely not working for mobiles. Can anyone suggest what I can do here? How can I make this responsive?
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
.flex-container {
position: inherit;
display: flex;
}
.img1-wrap {
position: relative;
overflow: hidden;
width: 280px;
padding: 50px;
}
.image {
width: 2000px;
}
.overlay {
display: block;
position: sticky;
bottom: 0;
left: 0;
right: 0;
background-color: #ad0909;
overflow: hidden;
height: 0%;
transition: .5s ease;
}
.img1-wrap:hover .overlay {
height: 100%;
}
.text {
color: white;
font-size: 12px;
font-family: Reggae One;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
<link href='https://fonts.googleapis.com/css?family=Reggae One' rel='stylesheet'>
</head>
<body>
<div class="flex-container">
<div class="img1-wrap">
<img src="/s/BBBook" alt="Avatar" class="image">
<div class="overlay">
<div class="text">BBBook is a community-based reading platform that facilitates collaborative study for university and school students.</div>
</div>
</div>
<div class="img1-wrap">
<a href="https://www.cash.live/">
<img src="/s/Cash-Live-Logo.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Cash Live is a live-streamed, free to enter poker game show featuring daily tournaments where players compete for cash.</div>
</div>
</a>
</div>
<div class="img1-wrap">
<a href="https://codeblugames.com/">
<img src="/s/CBG" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Code Blue Games is developing 6Degrees, a Third Person Action Adventure/Tower Defense game.</div>
</div>
</a>
</div>
<div class="img1-wrap">
<img src="/s/Acces-Job" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Accessible Jobs is developing an online job portal focused on helping people with disabilities find accessible work.</div>
</div>
</div>
</div>
<div class="flex-container">
<div class="img1-wrap">
<a href="https://dineeasy.ca/">
<img src="/s/dinenew" alt="Avatar" class="image">
<div class="overlay">
<div class="text">DineEasy is a one-stop platform for powering the digital infrastructure for restaurants, cafes, and hotels.</div>
</div>
</a>
</div>
<div class="img1-wrap">
<a href="https://www.gamejobs.ninja/" target="blank">
<img src="/s/gamesninja.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">GameJobs.Ninja is a recruitment platform focused on the video games industry.</div>
</div>
</a>
</div>
<div class="img1-wrap">
<a href="https://www.myhubly.com/" target="blank">
<img src="/s/hubli" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hubly is building technology to power the future of financial planning and advice.</div>
</div>
</a>
</div>
<div class="img1-wrap">
<a href="https://www.ludare.com/" target="blank">
<img src="/s/Ludare" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Ludare Games Group is a publisher of free-to-play mobile games featuring top-tier licensed intellectual properties.</div>
</div>
</a>
</div>
</div>
<div class="flex-container">
<div class="img1-wrap">
<a href="https://pepper.gg/" target="blank">
<img src="/s/pepac.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">PEPPER lets gamers and organizers discover and create local and online events for cash prizes. Acquired by TGS Esports.</div>
</div>
</a>
</div>
<div class="img1-wrap">
<a href="https://storiiitime.com/" target="blank">
<img src="/s/StoriiTime" alt="Avatar" class="image">
<div class="overlay">
<div class="text">StoriiiTime empowers online influencers to earn more with less work through its no-code narrative game templates. </div>
</div>
</a>
</div>
<div class="img1-wrap">
<img src="/s/Startup" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Startup Arena is building a model for co-working startup spaces in a post-COVID world.</div>
</div>
</div>
<div class="img1-wrap">
<img src="/s/SuperCommerce" alt="Avatar" class="image">
<div class="overlay">
<div class="text">SuperCommerce is a buyer, operator, and scaler of ecommerce websites.
</div>
</div>
</div>
</div>
<div class="flex-container">
<div class="img1-wrap">
<img src="/s/v2ac.png" alt="Avatar" class="image">
<a href="https://victorysquare.com/" target="blank">
<div class="overlay">
<div class="text">V2 Games is a developer and publisher of casual mobile games. Acquired by Victory Square Technologies.
</div>
</div>
</a>
</div>
<div class="img1-wrap">
<img src="/s/Vetsie" alt="Avatar" class="image">
<a href="https://www.vetsie.com/" target="blank">
<div class="overlay">
<div class="text">Vetsie is making veterinary care more accessible by leveraging innovative technology to transform pet care.</div>
</div>
</a>
</div>
</div>
</body>
While avoiding detailed suggestions that would perhaps get too subjective, one could greatly improve the responsiveness of the layout by doing the following:
Remove all but the first .flex-container div. Instead, put all .img1-wrap elements within the first (and only) .flex-container.
Add flex-wrap: wrap; to the CSS rules for the .flex-container element.
Add justify-content: center; to the CSS rules for the .flex-container element.
Change the width CSS property from 280 to 270.
Further improvement could certainly be made, but the above will be adequate in terms of keeping the content presentable at any width, and should serve as a basis for further customization on your part. In the above suggestions, I also did not address browser-specific prefixing for flex-related rules, which you can investigate further, if interested.
Related
I thought I had everything covered, but I'm now having issues with flip boxes working on Mac. I was able to make them compatible with different browsers on phones. I had someone with a Mac say that they were having problems with the animation. I heard that they saw a weird blinking and can see the front of the card through the back. I'm not sure what I'm missing. The last time I had this issue was with iOS, but I was just missing one line of code. Any suggestions? Honestly, I'm winging this as I go and can use any guidance.
body {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
/* black */
overflow-y: hidden;
/* Hide vertical scrollbar */
overflow-x: hidden;
/* Hide horizontal scrollbar */
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-content: center;
align-items: center;
grid-gap: 10px;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/*Desktop*/
.grid {
grid-template-columns: repeat(1, 8fr);
}
}
.flip-card {
background-color: transparent;
width: 275px;
height: 250px;
perspective: 1000px;
}
.flip-card-inner {
border-style: hidden;
position: relative;
width: 100%;
height: 100%;
text-align: left;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: black;
color: #152939;
text-align: center;
}
.flip-card-back {
background-color: #152939;
color: white;
transform: rotateY(180deg);
line-height: 1.25;
}
li {
margin: 10px 0;
}
.vertical-center {
margin: 0;
position: absolute;
top: 45%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
img {
opacity: 0.45;
}
<link href=https://fonts.googleapis.com/css?family=Montserrat:400,500,700,900|Ubuntu:400,500,700 rel="stylesheet">
<section id="team">
<div class="container">
<div class="grid">
<!-- #stakeholder benefits -->
<!-- #regulatory agencies -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="container">
<img src="https://i.ibb.co/26CVgtv/EMA-building-1024px.png" alt="EMA-building-1024px" border="0" width="275px" height="250px" opacity="0.4">
<h2 class="centered">Regulatory<br />Agencies</h2>
</div>
</div>
<div class="flip-card-back">
<div class="vertical-center">
<ul>
<br />
<li style="font-size:15px;">Real-time monitoring & auditing</li>
<li style="font-size:15px;">No need to go on-site to review necessary paperwork</li>
<li style="font-size:15px;">Access to digital database on contamination levels, origin and destination(s)</li>
</ul>
</div>
</div>
</div>
</div>
<!-- #generators -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="container">
<img src="https://i.ibb.co/vqw9456/ba2679-3a022e1d9d7946beaf7e22d07.png" alt="ba2679-3a022e1d9d7946beaf7e22d07" border="0" width="275px" height="250px">
<h2 class="centered">Generators</h2>
</div>
</div>
<div class="flip-card-back">
<div class="vertical-center">
<ul>
<br />
<li style="font-size:15px;">Access to real-time project updates</li>
<li style="font-size:15px;">Limit exposure to regulatory penalties</li>
<li style="font-size:15px;">Accurately forecast and reduce costs with start-to-finish project insights</li>
<li style="font-size:15px;">Cost-effective</li>
</div>
</div>
</div>
</div>
<!-- #environmental consultants -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="container">
<img src="https://i.ibb.co/QvN3jC5/Environmental-Consultants-SESA-e1510386416577.jpg" alt="Environmental-Consultants-SESA-e1510386416577" border="0" width="275px" height="250px">
<h2 class="centered">Environmental Consultants</h2>
</div>
</div>
<div class="flip-card-back">
<div class="vertical-center">
<br />
<ul>
<li style="font-size:15px;">Easier vetting to review credentials of necessary companies</li>
<li style="font-size:15px;">Single and centralized repository to access all relevant documents</li>
</ul>
</div>
</div>
</div>
</div>
<!-- #remediation consultants -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="container">
<img src="https://i.ibb.co/0KxTnM9/remediation-2-722x368.jpg" alt="remediation-2-722x368" border="0" width="275px" height="250px">
<h2 class="centered">Certified Remediation Contractors</h2>
</div>
</div>
<div class="flip-card-back">
<div class="vertical-center">
<ul>
<br />
<li style="font-size:15px;">Digital manifests save time, space, energy and money</li>
<li style="font-size:15px;">Improve trucker management</li>
<li style="font-size:15px;">Easily post jobs in need of additional compliant truckers</li>
</ul>
</div>
</div>
</div>
</div>
<!-- #remediation professionals -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="container">
<img src="https://i.ibb.co/pWkWdMx/Services-Header-REM1.jpg" alt="Services-Header-REM1" border="0" width="275px" height="250px">
<h2 class="centered">Remediation Professionals<br />(i.e. LSRPs)</h2>
</div>
</div>
<div class="flip-card-back">
<div class="vertical-center">
<ul>
<li style="font-size:15px;">Minimize paperwork by receiving necessary documents in the cloud</li>
<li style="font-size:15px;">Streamlined updates to Regulatory Agencies</li>
</ul>
</div>
</div>
</div>
</div>
<!-- #material truckers -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="container">
<img src="https://i.ibb.co/jktCcCh/construction-materials-being-transported-through-dump-truck-hauling-services.jpg" alt="construction-materials-being-transported-through-dump-truck-hauling-services" border="0" width="275px" height="250px">
<h2 class="centered">Material Truckers</h2>
</div>
</div>
<div class="flip-card-back">
<div class="vertical-center">
<br />
<ul>
<li style="font-size:15px;">Easier hiring process with ability to upload credentials and list references for new jobs</li>
<li style="font-size:15px;">Eliminates need to call for or save paper manifest receipts</li>
<li style="font-size:15px;">Faster pay through direct invoicing</li>
<li style="font-size:15px;">Post available trucks for hire</li>
</ul>
</div>
</div>
</div>
</div>
<!-- #disposal facilities -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="container">
<img src="https://i.ibb.co/BnwcyRy/construction-site-waste.jpg" alt="construction-site-waste" border="0" width="275px" height="250px">
<h2 class="centered">Disposal Facilities</h2>
</div>
</div>
<div class="flip-card-back">
<div class="vertical-center">
<br />
<ul>
<li style="font-size:15px;">Go green - no need to buy paper and printer cartridges to print paper manifests</li>
<li style="font-size:15px;">Easier manifest delivery - assign electronically to truckers ahead of time, no need to sign paper manifests at origin and destination</li>
</ul>
</div>
</div>
</div>
</div>
<!-- #material testing labs -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="container">
<img src="https://i.ibb.co/wckqzpt/R0cd7e9fd21b0182c7cfba5b6c278ab7a.png" alt="R0cd7e9fd21b0182c7cfba5b6c278ab7a" border="0" width="275px" height="250px">
<h2 class="centered">Material Testing Labs</h2>
</div>
</div>
<div class="flip-card-back">
<div class="vertical-center">
<ul>
<br />
<li style="font-size:15px;">Share results faster by integrating with TerraTrackr database</li>
<li style="font-size:15px;">Upload testing lab results <br /> and assign a unique project <br /> ID for easy organization</li>
</ul>
</div>
</div>
</div>
</div>
Answer: justify-content: center;
(You had a typo)
I ended up adding backface visibility to the image and it's all good!
I have an assignment which I am required to make a website using html,css,and bootstrap. I am almost done in finishing the webpage but I am stuck in resizing the lightbox photo gallery. I want it to resize according to the screen size. Smaller screen = Smaller images. I tried setting the max-height and max-width of the images to 100% but it did not work.
at 100%:
at 200%:
at 300%:
Website: http://syphym.infinityfreeapp.com/TheOfficialPodcast.html
I want it to instead of making it 4 to 2 and 2 to 1 I want to resize it and maintain its original position
Sorry for the question but I really don't know how to fix this
code:
<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>The Official Podcast</title>
<style>
*
{
margin: 0;
padding: 0;
}
#HomeScreen
{
background-image: url('Picture/Background.jpg');
background-size: cover;
background-position: center;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
padding: 0 20px;
}
.Theboys
{
background-color: black
}
.Title
{
text-align-last: center;
text-decoration: none;
color: #f2f2f2;
font-size: 50px;
font-family: sans-serif;
letter-spacing: 0.5px;
}
.name
{
background-color: black;
text-align-last: center;
text-decoration: none;
color: #f2f2f2;
font-size: 30px;
font-family: sans-serif;
letter-spacing: 0.5px;
}
.gap100
{
padding:70px 0px;
}
.resize img
{
max-height: 100%;
max-width: 100%;
}
</style>
</head>
<body>
<header id="HomeScreen">
<section class="Theboys">
<div class="container">
<a href=#Official-Podacast>
<center>
<img src="https://i.ytimg.com/vi/jFqL8N3t97Y/maxresdefault.jpg" width="80%" height="80%" >
</center>
</a>
<div class="Title">
The Official Boys
</div>
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="card border-0">
<a class="lightbox" href="#Jackson">
<div class="resize">
<img src="Picture/Jackson.png" alt="img1" class="card-img-top">
</div>
</a>
<div class="name">
Jackson
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card border-0">
<a class="lightbox" href="#Andrew">
<div class="resize">
<img src="Picture/Andrew.png" alt="img1" class="card-img-top">
</div>
</a>
<div class="name">
Andrew
</div>
</div>
</div class="name">
<div class="col-md-6 col-lg-3">
<div class="card border-0">
<a class="lightbox" href="#Charlie">
<div class="resize">
<img src="Picture/Charile.png" alt="img1" class="card-img-top">
</div>
</a>
<div class="name">
Charlie
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card border-0">
<a class="lightbox" href="#Kaya">
<div class="resize">
<img src="Picture/Kaya.png" alt="img1" class="card-img-top">
</div>
</a>
<div class="name">
Kaya
</div>
</div>
</div>
</div>
</div>
</section>
</header>
<section>
<div class="container">
<div class = "row gap100">
<a name="Official-Podacast">
<div class="col-md-6">
<h2>The Official Podcast</h2>
<p>The Official Podcast is where four international man friends congregate to discuss just about everything. Featuring dumb questions, YouTube celebrities, childish giggling, burger puns, more dumb questions, fatherly advice, bad dating stories, even more dumb questions, and a slew of guest stars, The Official Podcast is a weekly show with a little something for everyone. Jackson, Andrew, Charlie, and Kaya gather to talk about only the most important things in life every Thursday at 8pm EST.</p>
<p>Listen to The Official Podcast:</p>
<ul>
<img src="Picture/Itunes.png" width="100" height="100">
<img src="Picture/Spotify.png" width="100" height="100">
<img src="Picture/Youtube.png"width="100" height="100">
</ul>
</div>
<div class="col-md-6">
<img src="Picture/TheBoys.jpg" class="img-fluid">
</div>
</a>
</div>
<div class = "row gap100">
<div class="col-md-6">
<a name="Jackson">
<img src="Picture/Jackson.jpg" class="img-fluid">
</div>
<div class="col-md-6">
<h2>Jackson Clarke</h2>
<p>Jackson Clarke is from australia he is the co-host of the Official podcast and he swears that he does not eat crayons anymore.</p>
<p>His internet name is Zealot he manges the editing of the podcast and the moist meter of charlie. He likes lego and dinasours and he is proud of it.</p>
<p>Watch his content:</p>
<ul>
<img src="Picture/Twitter.png" width="100" height="100">
<img src="Picture/Twitch.png" width="80" height="80">
<img src="Picture/Youtube.png"width="100" height="100">
</ul>
</div>
</a>
</div>
<div class = "row gap100">
<div class="col-md-6">
<a name="Andrew">
<h2>Andrew Wagenheim</h2>
<p>TAndrew’s notability on the internet comes twofold. He was originally known for his YouTube channel HuggbeesTV, a variety comedy channel, on which he continues to upload. </p>
<p>Several years later, he also began hosting The Official Podcast alongside Kaya Orsan, Jackson Clarke and Charlie White (known on YouTube as Cr1TiKaL). </p>
<p>Watch his content:</p>
<ul>
<img src="Picture/Twitter.png" width="100" height="100">
<img src="Picture/Twitch.png" width="80" height="80">
<img src="Picture/Youtube.png"width="100" height="100">
</ul>
</a>
</div>
<div class="col-md-6">
<img src="Picture/Andrew Hugbess.png" class="img-fluid">
</div>
</div>
<div class = "row gap100">
<div class="col-md-6">
<a name="Charlie">
<img src="Picture/Charlie.jpg" class="img-fluid">
</div>
<div class="col-md-6">
<h2>Charlie White</h2>
<p>Also known as Cr1TiKaL, he is a supremely popular gaming commentator who would earn an astounding 5 million subscribers with viral videos such as "The Most Difficult Game Ever Created Gameplay and Commentary," "The Real Mighty Thirsty" and "The Real Edge of Glory."</p>
<p>He also works on a side project called moist meter where he rate different games and movies.</p>
<p>Watch his content:</p>
<ul>
<img src="Picture/Twitter.png" width="100" height="100">
<img src="Picture/Twitch.png" width="80" height="80">
<img src="Picture/Youtube.png"width="100" height="100">
</ul>
</div>
</a>
</div>
<div class = "row gap100">
<div class="col-md-6">
<a name="Kaya">
<h2>Kaya Orsan</h2>
<p>He was born in Germany, but his family is from Turkey, where he spent half of his life and a half in Germany. For a while, he was in Turkey but he's back in Germany.</p>
<p>Kaya is known for drinking and going on rants about things that pisses him off. You can buy a poster with his special couger poster on it off the Official Podcast Patreon for $50,000.</p>
<p>Watch his content:</p>
<ul>
<img src="Picture/Twitter.png" width="100" height="100">
<img src="Picture/Twitch.png" width="80" height="80">
<img src="Picture/Youtube.png"width="100" height="100">
</ul>
</div>
</a>
<div class="col-md-6">
<img src="Picture/KayaOrsan.jpg" class="img-fluid">
</div>
</div>
</div>
</section>
<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.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
When you use bootstrap with cols you should know that the page width is divided to 12.
for example, if you have 4 divs and each of them has col-3 it will place them in the same line.
But if you are trying to put 4 times col-6 in the same row, that would be a mistake (As you did, using col-md-6)
For what you asked, I would suggest changing the class to col-3 instead of col-md-6 col-lg-3 for each of the 4 divs
I wanted the social media icons to be visible without scrolling. This has worked before, is there a reason it's not? It doesn't seem to be the images taking up space.
I placed min-height:100vh on .container, HTML and body tag I didn't see any results. I changed the size height images and that also didn't get my desired result.
html {
height: 100%;
}
body {
background-color: #e2e2e2;
font-family: "Montserrat", sans-serif;
font-weight: 500; }
/* min height */
.container {
white-space: nowrap;
min-height: 100vh;
}
<div class="container"><nav>
<div class="site_header">
<img alt="nav logo" class="logo" src="https://i.imgur.com/1SxQJfI.png">
<div class="right">
<div class="class_button">
<a class="">CLASSES</a>
</div>
<img alt="menu button" class="menu" src="https://i.imgur.com/beUooBz.png">
</div>
</nav>
<div id="slider">
<div class="slider_child" id="slider_child">
<div class="image_con" style="left: 50%; opacity: 1">
<img src="https://i.imgur.com/xvYImiF.png" class="img1" />
</div>
<div class="image_con" style="left: 40%; opacity: 0">
<img src="https://i.imgur.com/hYnjyMy.png" class="img2" />
</div>
<div class="image_con" style="left: 40%; opacity: 0">
<img src="https://i.imgur.com/kGZ5oCv.png" class="img3" />
</div>
</div>
<!--ARROW AND TEXT ISSUE -->
<a class="slidenext" onclick="nextSlide();">
<img src="https://i.imgur.com/GASeP9Y.png" class="arrow_icon" />
<div class="grow">GROW</div>
</a>
<a class="slideprev" onclick="prevSlide();"><img src="https://i.imgur.com/WLkS6Jk.png" class="arrow_icon" />
<div class="shift">SHIFT</div>
</a>
<div class="title_holder">
<div class="title lineheight">
IR
</div>
<div class="title lineheight">
REG
</div>
<div class="title">
ULAR
</div>
<div class="button">
<a class="learn_more">LEARN MORE</a>
</div>
</div>
</div>
<!-- footer social media and slideshow numbers-->
<p>
#follow us
</p>
<div class="footer">
<img src="https://i.imgur.com/rCkPv9i.png alt="instagram link" class="social_icons ig" />
<img src="https://i.imgur.com/9rmiZY1.png" alt="facebook link" class="social_icons" />
</div>
</div>
</div>
</div>
codepen
Change your slider image height to 630px. It should place the whole container within 100vh. #slider { height: 630px }. Another tip: If you are using flexbox. You don't need absolute positioning for footer in this case.
I have an issue with bootstrap thumbnail and horizontal scrollbar in IE and Firefox but not chrome nor mobile browsers.
So basically, in firefox and IE the modals look strange and there is a horizontal scroll bar, however this issue does not appear in chrome or mobile phone browsers. as you see in the image, this is the issue
and this is how modals look like in firefox
and this is how it should look like without any issue as in chrome
and for the modal code here:
<div class="container" id="portfolio" >
<hr>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a href="Text 101 WebBuild V1/Text 101 WebBuild V1.html" target="_blank"> <img src="images/text101.png" alt="..." class="image">
<div class="imgDescription">
<h3 class="img-content"><strong>Text 101</strong></h3>
<span class="modal-button" >
<img src="images/unity1.png" style="height:30px; width:30px;" > </span>
</div>
</a>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a href="landingPage.html" target="_blank"> <img src="images/myweb-app.png" alt="..." class="image">
<div class="imgDescription">
<h3 class="img-content" style="left:95px;"><strong>MyWebsite App</strong></h3>
<span class="modal-button" style="left:145px">
<img src="images/webdev.png" style="height:30px; width:auto;" > </span>
</div>
</a>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a href="#"> <img src="images/card3.jpg" alt="..." class="image">
<div class="imgDescription">
<h3 class="img-content"></h3>
<span class="modal-button"></span>
</div>
</a>
</div>
</div>
</div> <!-- portfolio end here -->
and the css used here:
.thumbnail {
position: relative;
display: inline-block;
}
.thumbnail .imgDescription {
position: absolute;
top: 4px;
left: 4px;
width: 98%;
height: 96%;
display: none;
color: #FFF;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
.thumbnail:hover .imgDescription {
display: block;
background: rgba(0, 0, 0, .6);
}
.thumbnail .imgDescription .img-content {
position: absolute;
top: 25%;
left:35%;
color:white;
}
.thumbnail .imgDescription .modal-button {
position: absolute;
top: 55%;
left:43%;
}
I just couldn't figure where the issue is I mean it runs noraml in chrome and phone browsers. any help with be much appreciated.
Your tags are out of place. Notice how you open an <a> tag then a <div> and a <span> but you close the </a> before the </span> and </div>. HTML requires proper nesting so before you close the </a> you need to close every tag under it. Try using this code for the portfolio HTML:
<div class="container" id="portfolio">
<hr>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a href="Text 101 WebBuild V1/Text 101 WebBuild V1.html" target="_blank"> <img src="images/text101.png" class="image" width="100%">
<div class="imgDescription">
<h3 class="img-content"><strong>Text 101</strong></h3>
<span class="modal-button">
<img src="images/unity1.png" style="height:30px; width:30px;">
</span>
</div>
</a>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a href="landingPage.html" target="_blank"> <img src="images/myweb-app.png" alt="..." class="image" width="100%">
<div class="imgDescription">
<h3 class="img-content" style="left:95px;"><strong>MyWebsite App</strong></h3>
<span class="modal-button" style="left:145px">
<img src="images/webdev.png" style="height:30px; width:auto;">
</span>
</div>
</a>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a href="#"> <img src="images/card3.jpg" alt="..." class="image" width="100%">
<div class="imgDescription">
<h3 class="img-content"></h3>
<span class="modal-button"></span>
</div>
</a>
</div>
</div>
</div>
</div>
Update: I also added width="100%" to the images for IE.
I have a page where I'd like to have a row of circular images with text on them that can serve as links. I've figured out how to get this to work for the general case of a full sized webpage, but when I resize the width of the page, the text doesn't scale with the image because I have to use absolute positions. Here's the html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>
<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>
<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>
<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>
</div>
</div>
</body>
</html>
Here's the main.css page...
body {
max-width: 900px;
margin: 0 auto;
}
.container {
width: 100%;
}
.button-pic {
opacity: 0.4;
position: relative;
}
.button-caption {
text-align: center;
position: absolute;
top: 87px;
left: 85px;
}
I'd like to find a way to not have to set the top and left positions of the button-caption since not all of my labels will be the same length. Anyone have advice to offer?
If you want your text position to remain consistent to the image you'll need to use percentages instead of setting a fixed amount of pixels for the position since the images are responsive.
See working Snippet.
.content {
max-width: 900px;
margin: auto;
}
.button-pic {
opacity: 0.4;
position: relative;
margin: auto;
}
.button-caption {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<a href="#">
<img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
<span class="button-caption">Just a Button</span>
</a>
</div>
<div class="col-md-3">
<a href="#">
<img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
<span class="button-caption">Button</span>
</a>
</div>
<div class="col-md-3">
<a href="#">
<img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
<span class="button-caption">Just a Really Very Pretty Long Label for a Button</span>
</a>
</div>
<div class="col-md-3">
<a href="#">
<img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
<span class="button-caption">A Button</span>
</a>
</div>
</div>
</div>
</div>