How to modify headers for individual product pages in Dawn theme? (Mobile)

[ArnauP]

Hi i would like to be able to make padding-left: 0px; in the header of the product page only (ON MOBILE), I have seen that there are people who use this code in theme liquid:

{%- if template.name == 'product' -%}
<style>
@media screen and (max-width: 749px) {
.header {
padding-left: 0px !important;
}
}
</style>
{%- endif -%}

but it does not work for me.

https://jaccomcollection.com/products/jaccom-cotton-t-shirt-1

Thanks You!

[Rahul_dhiman · Accepted solution]

Hello @ArnauP 
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> section-main-product.css
add this code at the end of the file.

@media screen and (max-width: 749px) {
#shopify-section-sections--23363770253654__header .header {
padding-left: 0px !important;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[Rahul_dhiman]

Thanks for accepting my solution
can you please buy me a coffee for my work.