A couple of edits needed - by jumcc87 - on WordPress WooCommerce support

This topic has 8 replies, 3 voices, and was last updated 9 years, 10 months ago ago by Olga Barlow

  • Avatar: jumcc87
    jumcc87
    Participant
    June 21, 2014 at 03:31

    Hello

    I have tried to look on support but cant see anything for this.

    The cart hover – when it shows whats in the cart there is a huge space between the item detail and the next item and/or the checkout button, is it possible to make this smaller?(seems to be the variable selection that causes this) screenshot

    on shop page pagnation. i will have over 20 pages, it shows the numbers of the pages on the pagnation and this has pushed the view selection to the row under pagnation. im not sure what to do with this but it is worrying what will happen with more pages – is there any solution or have you heard of this?screen shot

    Is there any for me edit the mobile view. I mentioned previously that the product gallery is not that clear that there are more images. I resized them on the desktop and that worked well. on the mobile/ tablet version – how can i make those same changes? also on the product gallery view on mobile, the arrows to go to next images are not visible – so thats why i want to make it clear there are more images.

    Thanks for your help, i know im a pain!

    Julia

    7 Answers
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    June 21, 2014 at 08:56

    Hello,

    Please provide us with link to the website and we’ll take a look at your issues.

    Regards,
    Jack Richardson

    Avatar: jumcc87
    jumcc87
    Participant
    June 21, 2014 at 09:21

    Hi Jack
    Thanks for your reply.

    the site is thestylebrothers.com

    I forgot to add another edit. In the top bar I have added a currency switcher and translator in the languages area. In css I have changed the display to webkit-inline-block so that they sit side by side instead or one under the other. This looks good on desktop.

    However on the mobile site the top bar looks messy and the the two widgets mentioned above are side by side however you have to scroll accross the screen to see both of them. Is it possible to change the the mobile css so that widgets in the language area look cleaner on mobile – perhaps aligned vertically on top of each other instead of side by side. I’m sorry I dont know how to edit mobile styles.

    Thank you so much for your help

    Please, contact administrator
    for this information.
    Avatar: jumcc87
    jumcc87
    Participant
    June 21, 2014 at 09:35

    also, with regards to how i edited the languages area so that the widgets sit side by side. this is what i did:

    .top-bar .languages-area {
    float: left;
    line-height: 25px;
    display: -webkit-inline-box;
    }

    .languages-area .widget-title {
    font-family: Open Sans;
    font-size: 13px;
    display: inline-block;
    text-transform: none;
    margin-bottom: 0;
    font-weight: 300;
    color: #8e8e8e;
    margin-left: 14PX;
    margin-top: 4PX;
    }

    Avatar: jumcc87
    jumcc87
    Participant
    June 22, 2014 at 08:40

    No rush as I know ive asked for a lot but just making sure you saw this message.

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    June 25, 2014 at 09:00

    Hello,
    If you want to display some styles only on mobile version you should use media queries. We have made some changes in your child theme style.css. Check, please.

    Regards,
    Olga Barlow

    Avatar: jumcc87
    jumcc87
    Participant
    June 27, 2014 at 12:30

    Thank you Olga

    The edits look great, much appreciated!

    I will have a go at editing the mobile css. Does that include what is viewed on tablets as well?

    Many thanks

    Julia

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    June 27, 2014 at 13:03

    Hello,
    No, you should use other media queries for tablets (min width 481 -767, max width 767, min width 768 & max width 979) depending on what exactly and where exactly you want to change. The one that we used in your custom.css meant for mobile devices only.

    Regards,
    Olga Barlow

  • Viewing 8 results - 1 through 8 (of 8 total)

The issue related to '‘a couple of edits needed’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.