How to make a Break in product.template.liquid

Solved
Tourist
43 1 10

You're very welcome! Sorry i couldn't see what's going on sooner. It's so hard when you're just trying to visualize instead of seeing what's going on in real time. 

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
1 Like
Tourist
43 1 10

Sent the new files. I actually downloaded debut theme and made sure it worked before sending it over. Email me if you get confused or have any more questions or problems! If you want to customize the widths or create media queries, let me know. I can do all of that. 

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
1 Like
Tourist
13 0 1

Thanks, I pasted the code you sent me and replaced the whole product.theme.liquid

 

Now it looks like this:

Unbenannt.png

 

as you can see, it need a bit of spacing for the "add to cart" buttom. Can you tell me where do put that spacing? Then it would be perfect.

 

Another question, you sent me code for the homepage aswell. Why do I need to replace code for the homepage?

0 Likes
Tourist
13 0 1

OK I fixed the spacing issue myself. 

 

I just added at the end :

 

<div class="row mt-3"></div>

It all looks perfect now. 

I did not change anything for the homepage though.  

0 Likes
Tourist
43 1 10

You have to integrate bootstrap into your theme. Bootstrap integration makes it so you can pull their styles from an external source. If not, it does not render since the styles will be missing. You do not need to change anything. That mt-3 is incorrect format, it has to equal to 12. so first column is 4, other column is 8. Install the bootstrap for best results and start editing from there. You can find out more about bootstrap here : https://getbootstrap.com/docs/4.0/getting-started/introduction/#starter-template you can see exactly where the code needs to be placed in order to work properly. You can learn more about grids here https://getbootstrap.com/docs/4.0/layout/grid/

 

The breakpoint you are seeing is 100% due to you not having bootstrap installed. The fix will not fully work. I have given you the code for theme.liquid which you can always revert back to a previous state. I have ensured the code was responsive and ready to go for any device. I created a new shopify account just to see what you see. 

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
1 Like

Success.

Tourist
43 1 10

Screen Shot 2019-05-15 at 10.47.57 AM.pngDesktop ScreensScreen Shot 2019-05-15 at 10.48.09 AM.pngMobile Screens

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
2 Likes
Highlighted
Tourist
13 0 1

Alright today I will include the theme.liquid code and see what happens. The thing is I got many apps and I worry it will conflict. Right now , all seems to be working fine. one smartphone as well as on desktop. But I will try to make it all properly integrated.

1 Like