Craft Theme: Page - How Do I customise the mobile view for a page

[Zahra_FB]

I need to customise the mobile view for a page. The page looks fine on desktop view, but the layout and image sizes on the mobile view don't look organised. The options to customise the mobile view of a page through theme settings doesn't do the work.

How can this be fixed?

Thanks.

Z

[theycallmemakka]

HI @Zahra_FB ,

I was a littile confused about which page u are refering to? Is that a normal page, a product page or anything else?

I just looked into my site where i used default craft theme and its responsive.

So, can you provide the link to the page?? So that i can review and provide a possible solution.

Thank you

[Zahra_FB]

Hi @theycallmemakka thank you for responding.

It is a page I had set up in pages because the preset home page didn't allow me to upload any images. So instead, I set up page, and put a link from the home page to it. The "Home" option in the menu takes you back to this page instead of the preset home page.

My website is www.FureverBougie.com . Here is the link to the page that I would like to customise the mobile view for: https://fureverbougie.com/pages/timeless-elegance-and-eternal-style .

Thank you. I really hope you can help. 
Z

[theycallmemakka]

Hi @Zahra_FB ,

I just reviewd the page https://fureverbougie.com/pages/timeless-elegance-and-eternal-style and it looks like you have created this page by adding content to the content section. For this page to be mobile responsive, we should write responsive CSS.

For now i have written a CSS that makes all the images full width on mobile device.

<style>
@media only screen and (max-width: 600px) {
.section-template--21083733360958__main-padding img, .section-template--21083733360958__main-padding p {
width: 100%!important;
padding-left: unset!important;
}
.section-template--21083733360958__main-padding img{
max-height: 100vw;
width: auto;
}
}
</style>

You can add the above CSS below your existing content. Please follow below steps to add the css.

Step 1: Edit thr required page.
Step 2: Toggle content to HTML.

Step 3: Add content to the end.

Step 4: Save

Note: Even after adding this CSS, there are still few spacing issues. For this to solve, we will need to add the whole content in appropiate structure which will require content update.

If you run into any issues, feel free to replay and ask for help.

Thank you

[theycallmemakka]

Hi @Zahra_FB ,

I just played around a bit with the Craft theme that you are using and found that the theme itself is highly customizable. We can create a very intuitive design using this free theme.

Please check the demo page I have created with this theme: https://mangit.myshopify.com/pages/test

Also, I believe you are creating the page https://fureverbougie.com/pages/timeless-elegance-and-eternal-style to replace this as the home page? If yes, this is a very wrong practice. This is not the correct way/practice to create a page.

Other Suggestions:

1. The home page does not have any content. It looks dull. As this is the first page that a user lands on, we should always make this page more enticing.
2. On the product page, the Add to cart button is not visible. This is a very big issue because Add to cart is one of the main feature of an ecommerce. This can have a huse impact on sales.

If you require further detailed feedback,  please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

Best Regards,
Mangit

[Zahra_FB]

Hi @theycallmemakka 

Thank you for all the details. 

I updated the page I had sent you yesterday but only just saw your replies. I would really appreciate if you could take a look at it again.

Yes, this page is to replace the home page because I did not have any option to add pics to the home page. What I did was the simplest solution without having to do anything with the coding.

Thank you for pointing out about the add to cart button, I have not completed testing all the pages and functions yet... I just finished adding new pics to the home page i created. 

I have been out the last 3 days taking pics of models with the products so I didn't get a chance to look through or try out your suggested solution yet, If you would be so kind to check the revised page and let me know if your code will still work, I can make the changes tomorrow.

Thank you again for spending time on this. Also... is there any way to set up the shopify created home page to look like my home page< If there ism then I wouldn't need that page and I am quite confident that it will be set for mobile view already.

Thanks again!

Z