How can I resize the blog header image on Yuva theme for desktop?

Store Design
,

Topic summary

Issue: Blog header image in the Yuva theme appears excessively large on desktop, while scaling correctly on mobile. The goal is to reduce its desktop size.

Proposed fix: Add Custom CSS in the theme editor using media queries to control the image wrapper’s aspect ratio via padding:

  • Desktop (≥768px): .image-wrapper { padding-bottom: 30%; }
  • Mobile (≤768px): .image-wrapper { padding-bottom: 60%; }

Result: The CSS change did not take effect.

Follow-up action: Remove a conflicting CSS block in the theme code (referenced in an attached screenshot) and then reapply the Custom CSS in the editor. This implies an existing rule may be overriding the new styles.

Current status: The specific code to remove could not be located; the requester asked which exact file in the Yuva theme contains it. An image attachment is central to identifying the target code.

Resolution: None yet. Open questions: exact file/path in the Yuva theme for the conflicting CSS, or whether a different selector than .image-wrapper is needed for this theme’s blog header.

Summarized with AI on December 30. AI used: gpt-5.
1

Dear all,

Hope you are well! I’m adding blogs to my website on Yuva Theme, for example here (pw = Test1!), but the header image loads huge on desktop. It scales well on mobile however.

Is there a way to ensure it’s a lot smaller on desktop?

Thank you and kind regards,

Philip

2

Hey @Philip7644

Pls follow below steps:

  1. Open your theme editor.

  2. Find and Open your blog template.

  3. Choose the image section with the issue.

  4. Copy the provided CSS code and paste it into the ‘Custom CSS’ input textbox, which is usually found at the bottom-right corner of the theme editor.

@media (min-width: 768px){
  .image-wrapper {
   padding-bottom:30%;
 }
}

@media (max-width: 768px){
  .image-wrapper {
  padding-bottom:60%;
}
}
1 Like
3

Hey @Sonya_2025 ,

Thank you for your reply, appreciate it!

I’ve tried your suggestion with the custom CSS but unfortunately, it doesn’t work.

Is there another option we can try?

Thank you and kind regards,

Philip

4

Hi Philip

Pls open your theme code editor and find the below code I marked out and remove it. Then do the steps above.

Sonya_2025_0-1714096040750.png
Sonya_2025_0-1714096040750.png1880×590 371 KB

Feel free to DM to me if you have further questions.

1 Like
5

Hi @Sonya_2025 ,

Thanks for getting back to me! I can’t find that line of code anywhere unfortunately.

In which file exactly should that be for the Yuva theme?

Kind regards,

Philip