How can I add a responsive logo to my Empire theme product page?

[D_Paloi]

I was hoping to use either the custom liquid or custom html block in the empire theme to add code that will display my logo at the top of the product page centered right in the middle. Would you possibly know which section block is better to use for this case & what the code would look like if i wanted to add a logo within these section blocks.

I am trying to figure out the code to add a logo within the custom liquid/html block on my empire theme to make it look like a funnel. I want it to look responsive in all devices. So far I have this code; <div style="text-align: center;">

<img src=“Image url here“ alt=""></div>

but it isn’t congruent with my store. (Image too large)

If anyone could offer support that would be greatly appreciated. 

[brandonpickus · Accepted solution]

Do this instead:

<div style="display: flex; justify-content: center; align-items: center; width: 100%;">
<img style="max-width: 600px;" src="Image url here" alt="">
</div>

Play with the max-width property on the image to your liking.

[D_Paloi]

Hi Brandon,

It works great. Is there a way to remove all the margin and padding as there is too much white space around the logo. how would i fit this code within the code you showed earlier?

[brandonpickus]

Hi there, are you able to send a link to the site? I'm thinking it is default padding/margins that come with some section blocks. If you want 0 margins/padding, we'll have to select it by it's shopify section ID.

[D_Paloi]

Nevermind, it was related to another section i had underneath. It seems fine now.

If you dont mind could you elaborate on how to select it by its shopify section id. Sounds interesting.

Thanks a lot 

[brandonpickus]

Sure, each new block you put on your page in the theme customizer gets a unique ID on the HTML markup. That way on the CSS front you can select specifically that one block and add new styling without affecting the rest of the blocks. Again, each of these blocks have styling already attached to them dependent on what theme you have. You can read more on CSS specificity here.