hi, can anyone help me align my add to cart and view options buttons for the mobile version of my site?
please attached photo.
im using flow theme.
Topic summary
A Shopify store owner using the Flow theme needs help aligning “Add to Cart” and “View Options” buttons on mobile devices. An attached image shows the misalignment issue.
Solution Provided:
A PageFly app representative offers CSS code to fix the button alignment:
- Navigate to Online Store → Theme → Edit code
- Locate the theme.min.css file
- Add specific CSS targeting
.product-grid--titlewithmin-height: 80pxfor screens under 768px width
Initial Issue Resolved:
The original poster confirms the fix works successfully.
Follow-up Problem:
A new issue emerges in landscape mobile orientation where the site logo overlaps text content. An image demonstrates this overlay problem. A CSS solution targeting .grid__item with margin adjustments is being provided, though the conversation appears ongoing.
sure,
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.min.css
Step 3: Paste the below code at bottom of the file → Save
@media (max-width: 767px){
.product-grid–title {
min-height: 80px !important;
}}
Hope that my solution works for you.
Best regards,
Henry | PageFly
that was it! thanks!
one more question if your able to help with as well.
while on mobile version with the device turned to the side my logo is now covering the wording on my image with text overlay. how can i fix this issue?
Thanks so much for your help!
You can try this code:
@media only screen and (max-width: 767px){
.grid__item {
margin-top: 100px !important;
}}