Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

CSS Issue I think- image galleries lining up

Edrol97

Well-Known Coder
Can anyone help with this? I'm still struggling. Code below for reference. I'm not sure if one of the images being a GIF makes a difference. I don't think it should make a difference but just including it in case it is.
CSS:
@font-face {
    font-family: Eliot Lord;
    src: url(Fonts/EliotlordhandRegular.ttf);
}
body {
    font-family: Eliot Lord;
}
.h1{
    font-size: 60pt;
}
.container {
    cursor: pointer;
    height: 100%;
    width: 100%;
  position: relative;
}
.galleries {
    overflow: hidden;
  position: relative;
}
.gallery1,
.gallery2,
.gallery3,
.gallery4,
.gallery5,
.gallery6,
.gallery7,
.gallery8,
.gallery9 {
    float: left;
}
.title_text {
    font-size: 44pt;
    font-weight: bold;
}
.caption_text {
    font-size: 25pt;
  height: 100%;
    width: 100%;
}
.slide-show_containers {
    margin-top: 50px;
    width: 100%;
  height: 500px;
}
.slide-show_1container,
.slide-show_2container,
.slide-show_3container,
.slide-show_4container,
.slide-show_5container,
.slide-show_6container,
.slide-show_7container,
.slide-show_8container,
.slide-show_9container{
    display: none;
  position: relative;
  margin: auto;
  height: 600px;
}
.image_slide1,
.image_slide2,
.image_slide3,
.image_slide4,
.image_slide5,
.image_slide6,
.image_slide7,
.image_slide8,
.image_slide9 {
    height: 100%;
    width: 600px;
    overflow: hidden;
  display: none;
  margin: auto;
  text-align: center;
}
.previous_button,
.next_button,
.close_button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
    align-items: center;
    cursor: pointer;
    font-size: xx-large;
  position: absolute;
}
.previous_button {
    top: 50%;
    left: 10px;
}
.next_button {
    top: 50%;
    right: 10px;
}
.close_button {
    top: 10px;
    right: 10px;
}
 

Attachments

  • Screenshot 2024-04-11 at 20.49.51.png
    Screenshot 2024-04-11 at 20.49.51.png
    1.5 MB · Views: 1
Last edited:
The CSS columns property might be what you're looking for. Use it on the .galleries element, rather than using float: left; on the child elements.

Setting columns: 300px auto; gets this result (with different height images). I'm not sure if this is what you're trying to get?
1712870370177.png
 
The CSS columns property might be what you're looking for. Use it on the .galleries element, rather than using float: left; on the child elements.

Setting columns: 300px auto; gets this result (with different height images). I'm not sure if this is what you're trying to get?
View attachment 2611
Hi John, I didn't have to specify columns previously and it just added the images in rows. I don't want the images so strictly aligned to this rigid a format necessarily. I've tried this and get this result- it seems to split in the middle quite obviously which I don't think I want
 

Attachments

  • Screenshot 2024-04-11 at 22.43.24.png
    Screenshot 2024-04-11 at 22.43.24.png
    2.1 MB · Views: 4
I'm not sure it's possible to have the images not aligned some sort of way, either vertically or horizontally. Unless you want to use absolute or relative positioning and explicitly define where the images should be.

Setting the image and image container widths to 100% will make the images automatically take the maximum amount of space in the column. That should remove the gap in the middle.

I didn't have to specify columns previously and it just added the images in rows.
Can you show a screenshot of how you had it previously?
 
I'm not sure it's possible to have the images not aligned some sort of way, either vertically or horizontally. Unless you want to use absolute or relative positioning and explicitly define where the images should be.

Setting the image and image container widths to 100% will make the images automatically take the maximum amount of space in the column. That should remove the gap in the middle.


Can you show a screenshot of how you had it previously?
I annoyingly don't
 
CSS grid could also be a possibility as well. Flex could work too.

Flex idea:

.parent{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
}
.parent img{
flex: 0 0 200px;
}

adjust as desired.
 
I'm not sure it's possible to have the images not aligned some sort of way, either vertically or horizontally. Unless you want to use absolute or relative positioning and explicitly define where the images should be.

Setting the image and image container widths to 100% will make the images automatically take the maximum amount of space in the column. That should remove the gap in the middle.


Can you show a screenshot of how you had it previously?

CSS grid could also be a possibility as well. Flex could work too.

Flex idea:

.parent{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
}
.parent img{
flex: 0 0 200px;
}

adjust as desired.
Much better!
 

New Threads

Buy us a coffee!

Back
Top Bottom