Design HELP! Homepage!

Store Design
, ,

Topic summary

A Shopify store owner using the Impact theme seeks mobile-specific design adjustments for their homepage at intisolarcar.com. They want to:

Two specific changes:

  • Add white space between the “Discover INTI” text and the image above it
  • Hide the “Be the first to ride the sun…” subheading on mobile devices only

Solutions provided:

Two community members offered CSS-based fixes:

  1. First approach: Add custom CSS code to the theme.liquid file (above the </body> tag) to adjust spacing and visibility

  2. Second approach: Insert media query CSS into the theme’s stylesheet (base.css/style.css) targeting screens under 699px width, which:

    • Hides the subheading using display: none
    • Adds 20px top padding to the heading

Both solutions include screenshots demonstrating the expected results. The issue remains open pending the original poster’s confirmation of which solution worked.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hey everyone!

Happy Wednesday! For the design on my landing page ONLY for Mobile, I am trying to see if there is a way to create a little white space between the “Discover int INTI” line and the picture we have above like reference below, it is right on it currently. Also, When someone looks at this on a phone, we are trying to make the “Be the first to ride the sun - …” line disappear? For me, it doesn’t do anything but get in the way here ONLY for Phones.

Website: intisolarcar.com

Theme: Impact by Maestrooo

Screenshot 2025-04-12 133809.jpg
Screenshot 2025-04-12 133809.jpg289×594 46.3 KB

1 Like
2

Hey @Giggl

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1744819385586.png
Moeed_0-1744819385586.png350×763 324 KB

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi @Giggl

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 699px){
slideshow-carousel#slideshow-template--17843839467692__slideshow p.subheading {
    display: none;
}

section#shopify-section-template--17843839467692__hot_spots_VnPVBx h2.h2 {
    padding-top: 20px;
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!