 Double Gallery |
  |
| louis |
 Nov 4 2020, 02:52 PM
Post
#1
|
|
Newbie  Group: Members Posts: 10 Joined: 19-November 09 Member No.: 10,382  |
I found the code for a gallery on W3schools.com. But the problem is I want to duplicate it below the first gallery. I tried but my images become vertical. The first link is the code I found.
https://www.w3schools.com/css/tryit.asp?fil...s_image_gallery the second is my code. http://www.charismacommunications.ca/gallery.html [code]<!DOCTYPE html> <html lang="en"> <style> hr { width: 200px; color: #000000; height: 25px; background: black; } .title { color: white; } div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; } </style> <head> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177203453-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-177203453-1'); </script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="Disabled photographers. Charisma communications, accessible camera, Accessible devices, Louis Gaudry, accessible photography,"> <meta name="author" content=""> <title>Charisma Communications - About</title> <!-- Bootstrap core CSS --> <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom fonts for this template --> <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i" rel="stylesheet"> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="css/resume.min.css" rel="stylesheet"> </head> <body id="page-top"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav"> <a class="navbar-brand js-scroll-trigger" href="#page-top"> <span class="d-block d-lg-none">Louis Gaudry</span> <span class="d-none d-lg-block"> <img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="img/profile.jpg" alt="Profile head shot of Louis Gaudry"> </span> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="index.html">Home</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="about.html">About</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="speaker.html">Speaker</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="links.html">Links</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="contact.html">Contact</a> </li> <hr> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="photography.html">Accessible Photography</a> </li> <li class="nav-item"> <a href="https://1fingertriggerphotographer.com/" target="_blank" class="nav-link js-scroll-trigger">1 Finger trigger Photographer</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="technology.html">My Technology Reviews</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="blog.html">Blog</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="links to.html">Links</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="contact us.html">Contact</a> </li> <li class="nav-item"> <a href="https://www.facebook.com/1-Finger-Trigger-Photography-291626164857941" target="_blank"><img src="img/facebook.jpg" width="35" height="37" alt="Facebook"/></a><a href="https://www.instagram.com/accessible_photography/" target="_blank"><img src="img/instagram.jpg" width="35" height="37" alt="Instagram"/></a><a href="https://twitter.com/Louis_Gaudry" target="_blank"><img src="img/twitter.jpg" width="34" height="37" alt="Twitter"/></a> </li> </ul> </div> </nav> <div class="container-fluid p-0"> <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="about"> <div class="w-100"> <h2 class="mb-0">Charisma Communications</h2> <div class="subheading mb-5"> <h3>Accessible Photography</h3></div> <br> <h2 class="lead mb-5">Trish Jackson - Brisbane, Queensland, Australia</h2> <div class="gallery"> <a target="_blank" href="photo/0cover.jpg"> <img src="photo/0cover.jpg" width="600" height="400" alt=""/> </a> <div class="desc">Add a description of the image here</div> </div> <div class="gallery"> <a target="_blank" href="photo/10991486_876113825744154_6178407530187493791_o.jpg"> <img src="photo/10991486_876113825744154_6178407530187493791_o.jpg" alt="Forest" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="gallery"> <a target="_blank" href="photo/townsville-comp-copy.jpg"> <img src="photo/townsville-comp-copy.jpg" alt="Mountains" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="gallery"> <a target="_blank" href="photo/sigIMG_2370xx.jpg"> <img src="photo/sigIMG_2370xx.jpg" alt="Northern Lights" width="600" height="451"> </a> <div class="desc">Add a description of the image here</div> </div> </section> <!-- Bootstrap core JavaScript --> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <!-- Plugin JavaScript --> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <!-- Custom scripts for this template --> <script src="js/resume.min.js"></script> </body> </html> This post has been edited by louis: Nov 4 2020, 02:55 PM |
  |
 
|
| louis |
Nov 6 2020, 10:38 AM
Post
#2
|
|
Newbie Group: Members Posts: 10 Joined: 19-November 09 Member No.: 10,382 |
Can anyone help me with this, please? Muchly appreciated.
|
|
|
|
| Christian J |
Nov 6 2020, 12:42 PM
Post
#3
|
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
I don't see vertical images when my browser window is wider than 1260px. But it's normal that floated images move below each other if there's not enough window width for them all to fit in a single line.
|
|
|
|
| louis |
Nov 6 2020, 02:07 PM
Post
#4
|
|
Newbie Group: Members Posts: 10 Joined: 19-November 09 Member No.: 10,382 |
QUOTE(Christian J @ Nov 6 2020, 01:42 PM)  I don't see vertical images when my browser window is wider than 1260px. But it's normal that floated images move below each other if there's not enough window width for them all to fit in a single line. What I am trying to do is duplicate what is in the red circle and put it below it. But it gets messiest up.  |
|
|
|
| Christian J |
Nov 6 2020, 02:47 PM
Post
#5
|
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
If you want to keep the two groups separate, you need to clear the CSS floats between the groups. One way is to put a container around each group of images:
CODE <div class="gallery-group"> <div class="gallery">... <div class="gallery">... <div class="gallery">... <div class="gallery">... </div> <div class="gallery-group"> <div class="gallery">... <div class="gallery">... <div class="gallery">... <div class="gallery">... </div> and then style the container like this: CODE div.gallery-group {overflow: auto;} Note that the images will still line-break inside each container in narrow windows. |
|
|
|
| louis |
Nov 6 2020, 02:55 PM
Post
#6
|
|
Newbie Group: Members Posts: 10 Joined: 19-November 09 Member No.: 10,382 |
QUOTE(Christian J @ Nov 6 2020, 03:47 PM) If you want to keep the two groups separate, you need to clear the CSS floats between the groups. One way is to put a container around each group of images: CODE <div class="gallery-group"> <div class="gallery">... <div class="gallery">... <div class="gallery">... <div class="gallery">... </div> <div class="gallery-group"> <div class="gallery">... <div class="gallery">... <div class="gallery">... <div class="gallery">... </div> and then style the container like this: CODE div.gallery-group {overflow: auto;} Note that the images will still line-break inside each container in narrow windows. and still keep the view I have? 4 in a row and next line, 4 in a row? |
|
|
|
| Christian J |
Nov 6 2020, 03:46 PM
Post
#7
|
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
Yes (with the final note).
|
|
|
|
| louis |
Nov 6 2020, 04:27 PM
Post
#8
|
|
Newbie Group: Members Posts: 10 Joined: 19-November 09 Member No.: 10,382 |
QUOTE(louis @ Nov 6 2020, 03:55 PM) QUOTE(Christian J @ Nov 6 2020, 03:47 PM) If you want to keep the two groups separate, you need to clear the CSS floats between the groups. One way is to put a container around each group of images: CODE <div class="gallery-group"> <div class="gallery">... <div class="gallery">... <div class="gallery">... <div class="gallery">... </div> <div class="gallery-group"> <div class="gallery">... <div class="gallery">... <div class="gallery">... <div class="gallery">... </div> and then style the container like this: CODE div.gallery-group {overflow: auto;} Note that the images will still line-break inside each container in narrow windows. and still keep the view I have? 4 in a row and next line, 4 in a row? ---------------------------------------------------------- Still somethings not right  file:///G:/Charisma%20Communications/gallery2.html [code]<!DOCTYPE html> <html lang="en"> <style> hr { width: 200px; color: #000000; height: 25px; background: black; } .title { color: white; } div.gallery { margin: 5px; border: 1px solid #ccc; width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; } div.gallery-group {overflow: auto;} </style> <head> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177203453-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-177203453-1'); </script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="Disabled photographers. Charisma communications, accessible camera, Accessible devices, Louis Gaudry, accessible photography,"> <meta name="author" content=""> <title>Charisma Communications - About</title> <!-- Bootstrap core CSS --> <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom fonts for this template --> <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i" rel="stylesheet"> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="css/resume.min.css" rel="stylesheet"> </head> <body id="page-top"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav"> <a class="navbar-brand js-scroll-trigger" href="#page-top"> <span class="d-block d-lg-none">Louis Gaudry</span> <span class="d-none d-lg-block"> <img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="img/profile.jpg" alt="Profile head shot of Louis Gaudry"> </span> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="index.html">Home</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="about.html">About</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="speaker.html">Speaker</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="links.html">Links</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="contact.html">Contact</a> </li> <hr> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="photography.html">Accessible Photography</a> </li> <li class="nav-item"> <a href="https://1fingertriggerphotographer.com/" target="_blank" class="nav-link js-scroll-trigger">1 Finger trigger Photographer</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="technology.html">My Technology Reviews</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="blog.html">Blog</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="links to.html">Links</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="contact us.html">Contact</a> </li> <li class="nav-item"> <a href="https://www.facebook.com/1-Finger-Trigger-Photography-291626164857941" target="_blank"><img src="img/facebook.jpg" width="35" height="37" alt="Facebook"/></a><a href="https://www.instagram.com/accessible_photography/" target="_blank"><img src="img/instagram.jpg" width="35" height="37" alt="Instagram"/></a><a href="https://twitter.com/Louis_Gaudry" target="_blank"><img src="img/twitter.jpg" width="34" height="37" alt="Twitter"/></a> </li> </ul> </div> </nav> <div class="container-fluid p-0"> <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="about"> <div class="w-100"> <h2 class="mb-0">Charisma Communications</h2> <div class="subheading mb-5"> <h3>Accessible Photography</h3></div> <br> <h2 class="lead mb-5">Trish Jackson - Brisbane, Queensland, Australia</h2> <div class="gallery-group"> <div class="gallery"> <img src="photo/10991486_876113825744154_6178407530187493791_o.jpg" alt="Forest" width="600" height="400"> <div class="gallery"><img src="photo/townsville-comp-copy.jpg" alt="Mountains" width="600" height="400"> <div class="gallery"><img src="photo/sigIMG_2370xx.jpg" alt="Northern Lights" width="600" height="451"> <div class="gallery"><img src="photo/0cover.jpg" width="600" height="400" alt=""/> </div> <h2 class="lead mb-5">Trish Jackson - Brisbane, Queensland, Australia</h2> <div class="gallery-group"> <div class="gallery"> <img src="photo/10991486_876113825744154_6178407530187493791_o.jpg" alt="Forest" width="600" height="400"> <div class="gallery"><img src="photo/townsville-comp-copy.jpg" alt="Mountains" width="600" height="400"> <div class="gallery"><img src="photo/sigIMG_2370xx.jpg" alt="Northern Lights" width="600" height="451"> <div class="gallery"><img src="photo/0cover.jpg" width="600" height="400" alt=""/> </div> </section> <!-- Bootstrap core JavaScript --> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <!-- Plugin JavaScript --> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <!-- Custom scripts for this template --> <script src="js/resume.min.js"></script> </body> </html> |
|
|
|
| Christian J |
Nov 6 2020, 05:07 PM
Post
#9
|
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
You haven't closed the gallery DIVs. Also <div class="w-100"> and <div class="subheading mb-5"> are not closed. Check with https://validator.w3.org/ in case there are more errors.
BTW, if you use heading between each gallery group you don't need the containers, then you can clear the floats with headings instead: CODE h2.lead mb-5 {clear: left;} either method should work. |
|
|
|
| louis |
Nov 6 2020, 08:33 PM
Post
#10
|
|
Newbie Group: Members Posts: 10 Joined: 19-November 09 Member No.: 10,382 |
QUOTE(Christian J @ Nov 6 2020, 06:07 PM) You haven't closed the gallery DIVs. Also <div class="w-100"> and <div class="subheading mb-5"> are not closed. Check with https://validator.w3.org/ in case there are more errors. BTW, if you use heading between each gallery group you don't need the containers, then you can clear the floats with headings instead: CODE h2.lead mb-5 {clear: left;} either method should work. ------------------------------------------------------- closed my tags but funny looking lol. [code]<!DOCTYPE html> <html lang="en"> <style> hr { width: 200px; color: #000000; height: 25px; background: black; } .title { color: white; } div.gallery { margin: 5px; border: 1px solid #ccc; width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; } div.gallery-group {overflow: auto;} h2.lead mb-5 {clear: left;} </style> <head> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177203453-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-177203453-1'); </script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="Disabled photographers. Charisma communications, accessible camera, Accessible devices, Louis Gaudry, accessible photography,"> <meta name="author" content=""> <title>Charisma Communications - About</title> <!-- Bootstrap core CSS --> <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom fonts for this template --> <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i" rel="stylesheet"> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="css/resume.min.css" rel="stylesheet"> </head> <body id="page-top"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav"> <a class="navbar-brand js-scroll-trigger" href="#page-top"> <span class="d-block d-lg-none">Louis Gaudry</span> <span class="d-none d-lg-block"> <img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="img/profile.jpg" alt="Profile head shot of Louis Gaudry"> </span> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="index.html">Home</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="about.html">About</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="speaker.html">Speaker</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="links.html">Links</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="contact.html">Contact</a> </li> <hr> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="photography.html">Accessible Photography</a> </li> <li class="nav-item"> <a href="https://1fingertriggerphotographer.com/" target="_blank" class="nav-link js-scroll-trigger">1 Finger trigger Photographer</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="technology.html">My Technology Reviews</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="blog.html">Blog</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="links to.html">Links</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="contact us.html">Contact</a> </li> <li class="nav-item"> <a href="https://www.facebook.com/1-Finger-Trigger-Photography-291626164857941" target="_blank"><img src="img/facebook.jpg" width="35" height="37" alt="Facebook"/></a><a href="https://www.instagram.com/accessible_photography/" target="_blank"><img src="img/instagram.jpg" width="35" height="37" alt="Instagram"/></a><a href="https://twitter.com/Louis_Gaudry" target="_blank"><img src="img/twitter.jpg" width="34" height="37" alt="Twitter"/></a> </li> </ul> </div> </nav> <div class="container-fluid p-0"> <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="about"> <div class="w-100"> <h2 class="mb-0">Charisma Communications</h2></div> <div class="subheading mb-5"> <h3>Accessible Photography</h3></div> <br> <h2 class="lead mb-5">Trish Jackson - Brisbane, Queensland, Australia</h2> <div class="gallery-group"> <div class="gallery"> <img src="photo/10991486_876113825744154_6178407530187493791_o.jpg" alt="Forest" width="600" height="400"></div> <div class="gallery"><img src="photo/townsville-comp-copy.jpg" alt="Mountains" width="600" height="400"></div> <div class="gallery"><img src="photo/sigIMG_2370xx.jpg" alt="Northern Lights" width="600" height="451"></div> <div class="gallery"><img src="photo/0cover.jpg" width="600" height="400" alt=""/></div> </div> <h2 class="lead mb-5">Trish Jackson - Brisbane, Queensland, Australia</h2> <div class="gallery-group"> <div class="gallery"> <img src="photo/10991486_876113825744154_6178407530187493791_o.jpg" alt="Forest" width="600" height="400"></div> <div class="gallery"><img src="photo/townsville-comp-copy.jpg" alt="Mountains" width="600" height="400"></div> <div class="gallery"><img src="photo/sigIMG_2370xx.jpg" alt="Northern Lights" width="600" height="451"></div> <div class="gallery"><img src="photo/0cover.jpg" width="600" height="400" alt=""/></div> </div> </section> <!-- Bootstrap core JavaScript --> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <!-- Plugin JavaScript --> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <!-- Custom scripts for this template --> <script src="js/resume.min.js"></script> </body> </html> |
|
|
|
| Christian J |
Nov 7 2020, 11:18 AM
Post
#11
|
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
There are new HTML errors (use the validator I linked to). Also you've removed the CSS float property:
CODE div.gallery { margin: 5px; border: 1px solid #ccc; width: 180px; } |
|
|
|
| louis |
Nov 7 2020, 12:20 PM
Post
#12
|
|
Newbie Group: Members Posts: 10 Joined: 19-November 09 Member No.: 10,382 |
QUOTE(Christian J @ Nov 7 2020, 12:18 PM) There are new HTML errors (use the validator I linked to). Also you've removed the CSS float property: CODE div.gallery { margin: 5px; border: 1px solid #ccc; width: 180px; } ----------------------------------------------------------- It's all validated. still not looking right. http://www.charismacommunications.ca/gallery2.html [code]<!DOCTYPE html> <html lang="en"> <style> hr { width: 200px; color: #000000; height: 25px; background: black; } .title { color: white; } div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; } div.gallery-group {overflow: auto;} h2.lead mb-5 {clear: left;} </style> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177203453-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-177203453-1'); </script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="Disabled photographers. Charisma communications, accessible camera, Accessible devices, Louis Gaudry, accessible photography,"> <meta name="author" content=""> <title>Charisma Communications - About</title> <!-- Bootstrap core CSS --> <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom fonts for this template --> <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i" rel="stylesheet"> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="css/resume.min.css" rel="stylesheet"> </head> <body id="page-top"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav"> <a class="navbar-brand js-scroll-trigger" href="#page-top"> <span class="d-block d-lg-none">Louis Gaudry</span> <span class="d-none d-lg-block"> <img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="img/profile.jpg" alt="Profile head shot of Louis Gaudry"> </span> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="index.html">Home</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="about.html">About</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="speaker.html">Speaker</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="links.html">Links</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="contact.html">Contact</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="photography.html">Accessible Photography</a> </li> <li class="nav-item"> <a href="https://1fingertriggerphotographer.com/" target="_blank" class="nav-link js-scroll-trigger">1 Finger trigger Photographer</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="technology.html">My Technology Reviews</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="blog.html">Blog</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="linksto.html">Links</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="contactus.html">Contact</a> </li> <li class="nav-item"> <a href="https://www.facebook.com/1-Finger-Trigger-Photography-291626164857941" target="_blank"><img src="img/facebook.jpg" width="35" height="37" alt="Facebook"/></a><a href="https://www.instagram.com/accessible_photography/" target="_blank"><img src="img/instagram.jpg" width="35" height="37" alt="Instagram"/></a><a href="https://twitter.com/Louis_Gaudry" target="_blank"><img src="img/twitter.jpg" width="34" height="37" alt="Twitter"/></a> </li> </ul> </div> </nav> <div class="container-fluid p-0"></div> <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="about"> <div class="w-100"> <h2 class="mb-0">Charisma Communications</h2></div> <div class="subheading mb-5"> <h3>Accessible Photography</h3></div> <br> <h2 class="lead mb-5">Trish Jackson - Brisbane, Queensland, Australia</h2> <div class="gallery-group"> <div class="gallery"> <img src="photo/10991486_876113825744154_6178407530187493791_o.jpg" alt="Forest" width="600" height="400"></div> <div class="gallery"><img src="photo/townsville-comp-copy.jpg" alt="Mountains" width="600" height="400"></div> <div class="gallery"><img src="photo/sigIMG_2370xx.jpg" alt="Northern Lights" width="600" height="451"></div> <div class="gallery"><img src="photo/0cover.jpg" width="600" height="400" alt=""/></div> </div> <h2 class="lead mb-5">Trish Jackson - Brisbane, Queensland, Australia</h2> <div class="gallery-group"> <div class="gallery"> <img src="photo/10991486_876113825744154_6178407530187493791_o.jpg" alt="Forest" width="600" height="400"></div> <div class="gallery"><img src="photo/townsville-comp-copy.jpg" alt="Mountains" width="600" height="400"></div> <div class="gallery"><img src="photo/sigIMG_2370xx.jpg" alt="Northern Lights" width="600" height="451"></div> <div class="gallery"><img src="photo/0cover.jpg" width="600" height="400" alt=""/></div> </div> </section> <!-- Bootstrap core JavaScript --> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <!-- Plugin JavaScript --> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <!-- Custom scripts for this template --> <script src="js/resume.min.js"></script> </body> </html> |
|
|
|
| Christian J |
Nov 7 2020, 02:42 PM
Post
#13
|
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
I think the reason you get columns now is because the SECTION element has the CLASS "d-flex" (which is styled as "display: flex" in http://www.charismacommunications.ca/vendo...otstrap.min.css ). I'd just remove that CLASS name from the SECTION element.
More about Flex layouts: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ |
|
|
|
| louis |
Nov 7 2020, 03:05 PM
Post
#14
|
|
Newbie Group: Members Posts: 10 Joined: 19-November 09 Member No.: 10,382 |
QUOTE(Christian J @ Nov 7 2020, 03:42 PM) I think the reason you get columns now is because the SECTION element has the CLASS "d-flex" (which is styled as "display: flex" in http://www.charismacommunications.ca/vendo...otstrap.min.css ). I'd just remove that CLASS name from the SECTION element. More about Flex layouts: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ----------------------------------------------- I give up. I'm gonna find a new gallery. My photos dont get big when I click on them anymore. So back to square one. But thanks for all your help. |
|
|
|
|
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 18th April 2024 - 02:28 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC