Adding an image that fits width of homepage - Brooklyn Theme

Tyshel_Lockamy1
Shopify Partner
21 0 2

Whenever I implement the code, even using the "Yoshi" example, it throws my entire site off- distorted.

:(

0 Likes
Tyshel_Lockamy1
Shopify Partner
21 0 2

Hi Britton, I left an example on a page in my store so you can possibly see where my error is. Here is the page: https://www.stylistssuite.com/pages/fashion-designers

I appreciate your help.

0 Likes
Tyshel_Lockamy1
Shopify Partner
21 0 2

Hi could you tell me why my wrapper doesn't come through my image? it's just a stagnant image.

0 Likes
Britton_Jenner
Shopify Staff (Retired)
Shopify Staff (Retired)
400 0 74

Hi again Tyshel,

Adding this effect to every image on your site will require you to wrap every image element with the div I mentioned above. In the case where some images are all the same size you can forgo the bit about adding an ID completely and just add on another class like so:

<div class="background collection-images">
<img alt="" src="//cdn.shopify.com/s/files/1/1270/5603/files/Yoshi_Insp_Ent_Logo_medium.jpg?16318838900236262793" style="float: none;transition: all 1s ease;width: 100%;">
</div>

For the example above you could use this kind of CSS to set the height:

.collection-images {
height:133.63px;
}

It would need to be done on a case by case basis though and would depend entirely on the structure of your theme. Getting that rolled out to your entire store is probably beyond the kind of support you would be able to get from the forums and I would recommend checking out one of our Shopify Experts.

That being said, it should be working for your homepage images. Could I get you to post the entire html code from your homepage content page rich text editor as well as a screenshot of where you added in the CSS code? That would be super useful for troubleshooting!
 

-Britton

Britton Shopify Guru
0 Likes
Tyshel_Lockamy1
Shopify Partner
21 0 2

Thanks, Britton,

I so much appreciate you helping me out.  

here is the screenshot of where I posted it.  - I posted in the theme.liquid.scss

 

(My homepage.content, I couldn't locate the rich text html.)

 

 

thanks

0 Likes
jess4mari
Tourist
6 0 1

why my wrapper doesn't come through my image?

Could you please advise why? and it doesn't have that hover/ float effect.

 

 

Britton_Jenner
Shopify Staff (Retired)
Shopify Staff (Retired)
400 0 74

Hi everyone,

I apologize here! I left off some of my code looks like. Please use this instead for your CSS:

.background {
background-color: red;
}

.background img:hover {
transition: all 0.5s ease;
transform: scale(0.9);
}

#yoshi {
height:143px;
}

That should sort it out! Let me know if the hovering still isn't working for people.

-Britton

Britton Shopify Guru
Tyshel_Lockamy1
Shopify Partner
21 0 2

WORKS! thanks for tackling this.  I appreciate it!

 

0 Likes
Blake_I_
Shopify Partner
7 0 1

Hi Britton,

Would this work for a fullscreen responsive video? If so or if not, how would I go about acheiving this on the Brooklyn theme homepage? Thanks in advance.

 

-Blake I.

Blake I.
0 Likes
dyjamerson_frei
New Member
1 0 0

In my case, the code above doesn't make the image with full width. It doesn't fit the left side of my page. Can someone help me, please!

0 Likes