Mobile version

  • Resolved mosesclarke91

    (@mosesclarke91)


    4 years, 10 months ago

    Hello,

    I am looking to be able to adjust the labels to fit nicely into the mobile and ipad interface. My labels are currently too large for the mobile device.
    How do I do this?

    Looking forward to hearing back from you. Thanks in advance!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author ILLID

    (@mihail-barinov)

    4 years, 10 months ago

    Hello,

    Maybe you can give me the link where I can look on these labels?

    Regards

    Thread Starter mosesclarke91

    (@mosesclarke91)

    4 years, 10 months ago

    Hi ILLID,

    Thanks for the reply. My website is not yet published so it will be difficult for you to see but I attached two screenshots for you to have an idea on what I mean. This first screenshot is my product shown on a laptop.
    https://snipboard.io/qmod0z.jpg

    this second screenshot is my product shown on a mobile device. As you can see the label is far too big for mobile devices so any ideas how to adjust this size to fit into the mobile device but also keep it big for the laptop version?
    https://snipboard.io/uTXlZy.jpg

    Plugin Author ILLID

    (@mihail-barinov)

    4 years, 10 months ago

    Thanks. So you can use some custom css styles and use vw font units.
    Please try to add this css:

    @media only screen and (max-width: 700px) {
.advanced-woo-labels .awl-product-label {
    font-size: 3vw !important;
}
}

    You can try to change the value of this font size to check what fit best for you.

    Regards

    Thread Starter mosesclarke91

    (@mosesclarke91)

    4 years, 10 months ago

    Hi Illid,

    That worked perfectly. Thank you so much 🙂

    Thread Starter mosesclarke91

    (@mosesclarke91)

    4 years, 10 months ago

    Hi Illid,

    Your CSS would perfectly for the mobile version. Thank you so much.
    I am having the same issue with the product description. I mean the product once I click into it from the shop page and it takes me to the product description.
    Is it possible to just remove these labels from this page as there is no function to buy the product here. It is just an information page?

    Please see attached the screenshot of what I mean:
    https://snipboard.io/gtPAjz.jpg

    Thanks. Looking forward to hearing back from you. Love your plugin!!

    Plugin Author ILLID

    (@mihail-barinov)

    4 years, 9 months ago

    If you need to disable labels showing on product details page just open plugin settings page and turn off ‘Show for single product’ option.

    Regards

    Thread Starter mosesclarke91

    (@mosesclarke91)

    4 years, 9 months ago

    Hey,

    Thanks. That’s exactly it. I didn’t know that was the single product function. Thanks again.

    • This reply was modified 4 years, 9 months ago by mosesclarke91.
    Thread Starter mosesclarke91

    (@mosesclarke91)

    4 years, 9 months ago

    Hi Illid,

    Sorry to continue this topic. I am having the same issue as above with my tablets view. That the labels are too large for my product. Is there a way to adjust the size individually in the mobile and the tablet version?

    Thanks in advance!!

    Plugin Author ILLID

    (@mihail-barinov)

    4 years, 9 months ago

    Well you can just update the style that I mentioned previously. For example use

    @media only screen and (max-width: 1000px) {
.advanced-woo-labels .awl-product-label {
    font-size: 3vw !important;
}
}

    So here I changed the max width device size so it must now includes and tablet devices.

    Regards

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Mobile version’ is closed to new replies.