Struggling with mobile responsiveness, custom content, and white space

Store Design
1

shopify theme: Impulse

live store: breakfastballapparel.com

demo showing issues: https://lsi2a55f5x259w10-63106646267.shopifypreview.com

I have some knowledge and understanding of code, but it’s kind of basic. I worked with HTML back in 2006 for a semester, and worked with webflow for a semester in 2019. I’ve been searching and trying to make this work on my own, but I’ve probably made things a little wonky.

The demo link shows the weird parts of our store and what I’m fighting with. I originally made an image with the text and graphic on it and just uploaded that, but it’s not very responsive and I know that’s not the best option for web design. So I’m trying to recreate it with HTML in the custom content section. I’ve finally made it look the way I want, but when I switch to mobile and the text is massive and hard to read. I also can’t figure out how to get rid of the white space between sections.

Issues:

  • “Golfing is hard. Go ahead, hit another one…” type is too big when switching to mobile.

  • white space between sections

Custom content HTML:

Breakfast Ball

Golf is hard. Go ahead, hit another one.

At Breakfast Ball, we'll make sure you look good
even when you're not.

2

Hi @breakballgolf ,

Please follow the instructions below:

  • Step 1: Please change all code:

  
    

      

        
![Breakfast Ball|1080x1081](upload://s4kukq4S9zdHCnEFxdtDGAecePx.png)

      

      
        

Golf is hard. Go ahead, hit another one.

        

At Breakfast Ball, we'll make sure you look good
          
even when you're not.
  • Step 2: Go to Assets > theme.css and paste this at the bottom of the file:
#shopify-section-template--16061213475067__1654269577ffa2dc39 .index-section {
	margin: 0 !important;
}
@media only screen and (max-width: 768px) {
	.custom__item .custom__item-p-title {
		font-size: 2em !important;
	}
	.custom__item .custom__item-p-subtitle {
		font-size: 1.5em !important;
	}
}

Hope it helps!

3

Awesome, that worked perfectly, thanks!

How would I add a margin to the sides for mobile? The script font is hitting the edges.

Never mind, I was just looking at shopify’s mobile view and hadn’t yet checked my phone. It looks perfect, thanks!