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
Related
I'm building a website in Bootstrap but when I switch my website to a mobile responsive view some elements are bumping into each other like this.
That's how site looks in the large version.
I'm tried to add some media queries.
#media (max-width: 992px) {
/*Intro*/
.title {
font-size: 30px;
}
.title-text {
font-size: 12px;
}
.title-btn button {
padding: 10px 35px !important;
}
}
But elements still are bumping into each other when I switch to mobile responsive view.
My HTML code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Intro -->
<section class="intro" id="intro">
<div class="container">
<div class="row">
<div class="col-lg-6 order-1 order-lg-2">
<img class="img-fluid" src="Img/Intro/Phone.png" alt="">
</div>
<div class=" col-lg-6 order-2 order-lg-1 title-block">
<div class="pre-title">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award" viewBox="0 0 16 16">
<path d="M9.669.864L8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193l.684 1.365 1.086 1.072L12.387 6l.248 1.506-1.086 1.072-.684 1.365-1.51.229L8 10.874l-1.355-.702-1.51-.229-.684-1.365-1.086-1.072L3.614 6l-.25-1.506 1.087-1.072.684-1.365 1.51-.229L8 1.126l1.356.702 1.509.229z"/>
<path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"/>
</svg>
<p>#1 Editiors Choice App of 2020</p>
</div>
<h1 class="title">
Best app for your
modern lifestyle
</h1>
<p class="title-text">
Increase productivity with a simple to-do app. app for
managing your personal budgets.
</p>
<div class="title-btn">
<button type="button" class="btn btn-primary">
Try for free
</button>
Watch demo video
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section class="features" id="features">
<div class="container">
<div class="companies">
<p class="companies-text">Trusted by companies like</p>
</div>
<div class="row companies-logos">
<div class="col-sm">
<img src="Img/Companies/SouthWest.png " class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Anubis.png" class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Alonzo.png" class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Express.png" class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Maniac.png" class="img-fluid" alt="">
</div>
</div>
</div>
</section>
The problem is that looks like structure of HTML in your footer section. Initializing the row div, you should have used "col" feature as you used. Your code looks like the same what I explain. However, there is a little bit difference compare to what i mention. In order to make it clear for you, i have build up this snippet for you. You need to use "col" feature on element that you want to layout . In your code, you used for container of image tags which is not the element you want to make it responsive. That is why you got bumping into each other. I wish that yoou figure it out. Cheers!
.box{
background-color: red;
width: 200px;
height: 200px;
display: inline-block;
}
.box-1{
background-color: yellow;
}
.box-2{
background-color: purple;
}
.box-3{
background-color: blue;
}
.box-4{
background-color: green;
}
.box-5{
background-color: lightpink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"
rel="stylesheet"
/>
<title>stackover</title>
</head>
<body>
<section class="features" id="features">
<div class="container">
<div class="companies">
<p class="companies-text">Trusted by companies like</p>
</div>
<div class="row companies-logos">
<div class="col-lg-4 col-md-3 col-sm-6 box box-1">Logo-1</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-2">Logo-2</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-3">Logo-3</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-4">Logo-4</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-5">Logo-5</div>
</div>
</div>
</section>
</body>
</html>
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.
Hey StackOverFlow Community,
I need to get these images touching together. They will eventually be much larger and touching the edge of the browser. These will be tiles that lead to examples of film work, currently have placeholder images.
I have tried and tried to get these images touching, but I'm not sure what is going on... set the margin and padding to 0.
Here is the code.
HTML
<section id="video-section" class="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2>Video Production</h2>
<hr class="small">
</div>
<div class="container-fluid full-width has-inner">
<div class="row row-no-gutter">
<div class="col-md-4 nogut">
<div id="image1" class="video-item">
<a href="https://vimeo.com/208403633">
<img id="portfolio1" class="img-full-width" src="img/image1.jpg">
</a>
</div>
</div>
<div class="col-md-4 nogut">
<div id="image2" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image2.jpg">
</a>
</div>
</div>
<div class="col-md-4 nogut">
<div id="image3" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image3.jpg">
</a>
</div>
</div>
</div>
<div class="row row-no-gutter">
<div class="col-md-4">
<div id="image4" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image4.jpg">
</a>
</div>
</div>
<div class="col-md-4">
<div id="image5" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image5.jpg">
</a>
</div>
</div>
<div class="col-md-4">
<div id ="image6" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image6.jpg">
</a>
</div>
</div>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
CSS
#video-section {
padding: 10px;
background: #353030;
color: white;
}
.containter-fluid .full-width {
padding-left: 0px;
padding-right: 0px;
overflow-x: hidden;
}
.row .row-no-gutter {
margin: 0px;
padding: 0px;
}
.nogut {
margin: 0px;
}
.img-full-width {
width: 100.5%;
height: auto;
}
Been spending a few hours trying to figure this out, what am I doing wrong?
Paddings are not on rows but on cols.
And it's not margin, so you .nogut will not work :)
You had almost the right answer, try this :
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
Then in your html :
<div class="row no-gutter">
First, right click in browser and use inspect (I think it is best in chrome.) Klick on this icon. Hover over your images and you will able to see which element the gap belongs to. When clicking the element you can in the styles section untick (and add) different css properties and see what happens. Very powerfull tool.
For you, I would also recommend to add padding: 0px; to .nogot and add that class to the second row also.
I am having some difficulties. I am developing a website and am having issues with the social link icons going tiny when the screen size is reduced. I'd like to use media queries to specify the size for smaller screens - what I am trying is not working.
Social links at top of page:
`<div class="container">
<div class="row-1">
<!--First column-->
<div class="col-sm-3">
<img src="images/fbGrey.png" class="img-responsive"
style="width:50px" alt="Find us on Facebook">
<hr class="vertical"/>
</div>
<!--Second column-->
<div class="col-sm-3">
<img src="images/twitterGrey.png" class="img-responsive"
style="width:50px" alt="Follow us on Twitter">
<hr class="vertical"/>
</div>
<!--Third column-->
<div class="col-sm-3">
<img src="images/instagramGrey.png" class="img-responsive"
style="width:50px" alt="Follow us on Instagram">
<hr class="vertical"/>
</div>
<!--Fourth column-->
<div class="col-sm-3">
<img src="images/pinterestGrey.png" class="img-responsive"
style="width:50px" alt="Follow us on Pinterest">
<hr class="vertical"/>
</div>
</div>
</div>`
Social links in footer:
`
<!--First column-->
<div class="col-md-3">
<!--Social buttons-->
<!--First column-->
<div class="container">
<div class="row-3">
<div class="col-sm-3">
<img src="images/fbGrey.png" class="img-responsive"
style="width:70px" alt="Find us on Facebook" id="fb">
<img src="images/twitterGrey.png" class="img-responsive"
style="width:70px" alt="Follow us on Twitter">
<img src="images/instagramGrey.png" class="img-responsive"
style="width:70px" alt="Follow us on Instagram">
<img src="images/pinterestGrey.png" class="img-responsive"
style="width:70px" alt="Follow us on Pinterest">
</div>
</div>
</div>`
Additionally, within the footer the height of <div class="footer-copyright">
increases when the screen size is reduced - anybody know why this is happening? I would also like to use media queries to fix this but it doesn't seem to work.
`<!--footer-->
<div class="span4">
<!-- empty, but using spacer to prevent collapse -->
<div class="spacer10"></div>
</div> </div>
<!--Second column-->
<div class="col-md-3">
<h5 class="title">OUR SERVICES</h5>
<p>Treatments</p>
<p>Bookings</p>
<p>Shop</p>
</div>
<!--First column-->
<div class="col-md-3">
<h5 class="title">COMPANY</h5>
<p><a href=index.html>Home</a></p>
<p>Location</p>
<p>Contact</p>
<p>Privacy Policy</p>
</div>
<!--Second column-->
<div class="col-md-3">
<h5 class="title">CONTACT</h5>
<strong>Hands on Sports & Holistic Therapy</strong><br>
50 Westonfields<br>
Bridgetown<br>
Totnes<br>
TQ90 5QX<br>
<abbr title="Phone">P: 07450232531</abbr><br><br>
</address>
<address>
<strong>Email: </strong><br>
jo#handson-therapy.com
</address>
</div>
</div>
</div>
<hr>
<!--Copyright-->
<div class="container">
<div class="row-5">
<div class="col-sm-12">
<div class="footer-copyright">
<div class="container-fluid">
<center>© 2017 Copyright: Hands on Sports & Holistic
Therapy. All rights reserved.</center>
</div>
</div>
</div>
</div>
<div class="span4">
<!-- empty, but using spacer to prevent collapse -->
<div class="spacer40"></div>
</div>
</footer>
<!--/.Footer-->`
Here is my code in JSFiddle - obvs no images present.
https://jsfiddle.net/AnnieWebDev/frrvmpnr/
Thanks for your help :)
have you tried to set min-width: 70px !important; on the img tag. This way the image will not go any smaller than the value which you set in there.
You have several errors in your code. Enter your code here and hit check and then fix the errors. html validator
Take </link> off the end of the <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"></link>
<center> is obscolete, use css. In your css style sheet you can add h1 {
text-align: center;} or inline html do it like this <h1 style="text-align:center;">Centered Heading</h1>
Try adding this in your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
I have three images on my site that are not equally spaced apart.
I would like to space these three items evenly across the page.
I have tried adding them into a container and applying different span classes to them but with no joy.
What is the best way to solve this without causing problems elsewhere? (e.g. on smaller devices).
<div class="col-1 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=HCV">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive" />
</a>
</div>
<div class="col-5 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TSZ">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive" />
</a>
</div>
<div class="col-8 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TRP">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive" />
</a>
</div>
The images are not equally spaced because you have provided inappropriate column classes for second and third div's.
Use col-4 for second(instead of col-5) and col-7 for third(instead of col-8) div.
<div class="col-1 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=HCV">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive" />
</a>
</div>
<div class="col-4 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TSZ">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive" />
</a>
</div>
<div class="col-7 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TRP">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive" />
</a>
</div>
You might aswell want to provide extra padding to each div for small resolutions.
Additionally, as haxxxton mentioned in comments, you should rather stick to standard bootstarp-3 classes for better usability.
Cheers!
You may like the reactive behaviour of a flex based solution like in this JSFiddle:
http://jsfiddle.net/6tknc03s/
.container {
display:flex;
justify-content:space-around;
flex-wrap:nowrap;
}
.container img {
width:100%;
}
I've tested this solution in Chrome, compatibility in FF and iOS requires vendor specific prefixes to be added to the CSS I've used.
Your best bet is to put them in col-*-4 (I chose sm, but whatever works best for you) and make sure to add class="img-responsive" to the img element, like so:
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive">
</div>
</div>
</div>
Example: http://www.bootply.com/4lmpKkgENa
Try this out. it works i have edited your code with adding style to it.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
li {
display:inline;
list-style:none;
}
</style>
</head>
<body>
<div class="col-1 row-5 sizex-3 sizey-3">
<ul>
<li> <a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=HCV">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive" />
</a>
</li>
<li>
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TSZ">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive" />
</a></li>
<li>
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TRP">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive" />
</a></li>
</ul>
</div>
</body>
</html>
Try this out:
<div class="row>
<div class-"container">
<div class="col-lg-4">
<img src="">
</div>
<div class="col-lg-4">
<img src="">
</div>
<div class="col-lg-4">
<img src="">
</div>
</div>
</div>