Code Embed Question

Hello Team, when I see youtubers add custom code and I dont mean code snippets but I mean things like object-fit. Im not sure how am I making changes to different custom classes when all the code reside on a single block?

HI @jtorr19

Its all pretty straight forward… if you have a div with some images (eg. image-2, image-3)inside it then you add an embed with the following code :

  <style>
     .image-3 {object-fit: contain;}
	 .image-2 {object-fit: contain;}
 </style>  

and thats pretty much it :slight_smile:

Hello sir, thank you for your help. I’m familiar with CSS however what Im not sure of is that when I drag the embed code component, its a block level element on its own line having nothing to do or not affecting any other elements that I can manipulable. Do I use the embed component or something else to add custom css code to every component on the website is what I mean

if you want to affect all components on the page you should add it to the page’s settings custom code “head” section, and if you want to affect the whole site add it to the custom code head section for the site ( in your project settings)

Good morning IVG, I opened a new page and added a div with dimensions with a specific class. In the head section within style tags i simply tried to make the div red but it did not work in designer or live view. Any ideas?

Can you please send a read only link to your site, so that they can have a look.

https://preview.webflow.com/preview/18-seminole-italian-bistro?utm_medium=preview_link&utm_source=designer&utm_content=18-seminole-italian-bistro&preview=157d17c48205893af85e1a19c7ea998a&pageId=5d9c90cec7e90b2b421433e0&mode=preview

Not sure, but it works for me… the div is red even if you remove the color from the webflow designer and only leave it in the embed…

Thank you so much for all your help. What I wanted to do originally was create an image gallery in grid with images using a class that would allow the images to fill in the div using object-fit. Even with setting a div with a specific width and height I cant seem to accomplish this even though I have seen Youtubers do this. I just want to accomplish this

are you talking about the masonry layout for your gallery?

I already have the masonry layout on the home page because the image gallery I have in mind using the grid did not pan out. Im a little concerned because I eventually want to do a website using grid with images kind of like what Jen Simmons did.

not sure whom you are referring to… and I don’t understand what kind of layout you are looking for - could you provide an example?

Here is an example, scroll down to where it says Grid Masterclass

So that one is pretty straight forward… whats the problem with creating it? you want the grid to autosize with the images?

It looks very straight forward however when I add a div to a grid and then add an image to the grid, the image collapses in live view. I wish I has an example of this. Sometimes its show perfectly fine and then sometimes its completely collapsed. Do I have to have specific dimensions in a div for the image to take up the entire space?