Hi guys,
I wanted to move the quick add button from top right to bottom right, which I have done as you can see in the screenshot. It looks good on both mobile and desktop. However, on Ipads and tablets, it doesn’t look good. Please see the screenshot attached. Is there a webkit that we could use to make it responsive on all devices regardless? Website url: https://tmal1jiuezcuosqk-58684113049.shopifypreview.com
Hi @air787 ,
We took a look and would recommend adjusting your HTML and css to the screenshoot below (highlighted in red):
For a more intuitive fix, we recommend trying out our page-builder as sometimes code might not accommodate all the scenarios. We allow our users to design their breakpoints UI (mobile, tablet & desktop) with live preview function. Regardless, we hope you find the suggestion helpful and good luck with the rest of your page-build!
Best regards,
Layoutbase - drag & drop page-builder
Hi @layoutbase ,
I really appreciate you taking the time to help out. I would definitely check your page builder, you think it could help me customize my current page or just to build new one from scratch?
Also regarding your solution, I understood the CSS part, but could you please tell me what to change in html? I just didn’t get it, need simpler steps or a little explanation, please. Thank you kindly.
Hi @air787 ,
Sorry for the delayed reply. Regarding your previous question, if you cannot update the HTML, you might also try adjusting from css:
.product-grid .grid-product__image-wrap {
height: 162px;
}
.product-grid .grid-product__image-wrap .grid__image-ratio {
height: 162px;
}
.product-grid .grid-product__image-wrap .grid__image-ratio img {
object-fit: contain;
}
@media(max-width: 768px){
.product-grid .grid-product__actions {
top: 160px;
}
}
Hope this suggestion helps!
Best,
Layoutbase
Hi @layoutbase
Thanks a lot for your help again. Your solution works great for mobile, however, on tablets, this is what it looks like. https://www.bringme.ca/?_ab=0&_fd=0&_sc=1
