How to adjust height over collection image?

English Shopify Shopify Design
1

Hi

Currently I am using the Bullet Theme and I am inbetween changing my website from one previous company that has closed and am rebuilding my new venture. For this reason the website looks pretty crazy and I would prefer to not send the URL as the thought makes me a little anxious hehe. Can somoene please help me with a very specific issue, my collection image currently doesn’t display the full image. The recommended size is 1200 px x 500 px and I have made a previous collection image that sat perfectly, this one is not sitting perfectly. Please advise how I can make the collection image full sized. Currently the image is cropped and it just needs a little bit of css, i tried something I saw on reddit which was

.banner-class {

height: 100vh;

}

Unfortunately that didn’t work

2 Likes
2

Hello @DaveyAlcatraz

Please try this code, and if it doesn’t work, kindly share your store URL so I can check and provide you with a proper update.

.collection-hero img {
  width: 100%;
  height: auto;
  object-fit: contain; 
}
.collection-hero {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: auto;
  min-height: 500px;
}
1 Like
4

Hey @DaveyAlcatraz! I totally get the anxiety around showing a messy transitional website - been there! :sweat_smile:

So for your Bullet theme collection image issue, that Reddit solution was close but probably too broad. Let me give you some targeted fixes:

Try this first:

.collection-hero__image img {
  height: 500px !important;
  object-fit: cover;
  width: 100%;
}

If that doesn’t work, try:

.page-header__image,
.page-header__image img {
  height: auto !important;
  max-height: 500px !important;
  object-fit: contain;
}

The main thing is object-fit - use cover if you want it to fill the space (might crop a bit), or contain if you want the whole image visible (might have empty space).

Since you mentioned one collection image worked perfectly before, can you check what dimensions that working one actually is? Sometimes the “recommended” size isn’t what actually works best with the theme’s CSS.

Also, quick tip - you can right-click on the problem image and “Inspect Element” to see exactly which CSS classes are being applied. That’ll help you target the right selectors.

Let me know which approach works for you! Looking forward to hearing from you.

Shubham | Untechnickle

1 Like
5

Thanks to both @devcoders @TheUntechnickle but unfortunately your solutions have not worked. I have tried to inspect the CSS and do what you’ve recommended but I can’t seem to get it to work. Can someone please help me with this :slight_smile: There’s definitely a coffee in it for whoever does it!

1 Like
6

Hey @DaveyAlcatraz,

I see the issue now - the overlap is happening because when we made the image display at full size, it’s pushing into the products section below.

We just need to add proper spacing. Try replacing the older CSS with this CSS:

.featuredMedia .featured {
    width: 100%;
    height: auto;
    display: block;
}

.featuredMedia .featured img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Fix the overlap - desktop only */
@media (min-width: 768px) {
    .intro {
        margin-bottom: 200px !important;
    }
}

This should give you the full-sized collection image without the overlap issue. That coffee’s looking good right about now! :hot_beverage:

Let me know if this sorts it out for you! Else please DM your collaborator code and we’ll set this up in no time.

Thanks,
Shubham | Untechnickle

7

Hello @DaveyAlcatraz

Can you please give me collaborator access so that I can check and provide you with a proper update?