Tagged: , , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • November 17, 2015 at 11:03 am #537213
    richardelectrix

    Hi

    On a mobile view when you are selecting a variable product, the label is crushed up to the left hand side and the drop down box is to the right of it.

    http://screencast.com/t/sXujju3s5

    It would look lots better if it was:

    Material Finish & Grade
    [ DROP DOWN BOX]

    Second selectable option
    [DROP DOWN BOX]

    Is this possible?

    November 17, 2015 at 3:50 pm #537339
    Yigit

    Hi richardelectrix!

    Please add following code to Quick CSS 

    @media only screen and (max-width: 480px) {
#top .variations td.label {
    width: 100%;
}}

    Regards,
    Yigit

    November 17, 2015 at 6:51 pm #537571
    richardelectrix

    Hi

    I have tried that. It has made a slight change but it hasnt made the desired change of having

    LABEL
    [DROP DOWN]

    LABEL
    [DROP DOWN]

    November 19, 2015 at 5:55 am #538725
    Ismael

    Hi!

    You can try this:

    @media only screen and (max-width: 480px) {
#top .variations td.label, #top .variations td.value {
    width: 100%;
    float: none;
    clear: both;
    display: block;
}
}

    Regards,
    Ismael

    November 19, 2015 at 3:06 pm #539036
    richardelectrix

    Hi

    That works perfectly.

    The only thing now that I need is I need padding-top to only apply to the to the 2nd row onwards.

    I am using the code below – you can see I have tried to use nth-child but have commented it out as it doesnt work.

    @media only screen and (max-width: 480px) {
#top .variations td.label, #top .variations td.value {
    width: 100%;
    float: none;
    clear: both;
    display: block;
}

/* #top .variations td:nth-child(1).label {
    padding-top: 0px;
} */

#top .variations td.label {
    padding-top: 20px;
} 
}

    Do you have any suggestions?

    November 23, 2015 at 3:32 pm #540927
    Andy

    Hi!

    can you show us where exactly you need this padding please? otherwise we would need to guess … Use screenshots to make things clear for us please.

    Regards,
    Andy

    November 23, 2015 at 4:16 pm #540983
    richardelectrix

    Hi

    http://screencast.com/t/mksljmXuI3CW

    Thanks

    November 23, 2015 at 10:15 pm #541198
    Andy

    Hey!

    thanks for the screenshot. Use this code:

    #top .variations_form>table {
margin-top: 0;
}

    Best regards,
    Andy

    November 24, 2015 at 10:29 am #541435
    richardelectrix

    Thanks it works perfectly

    November 24, 2015 at 1:27 pm #541569
    Andy

    Hi!

    glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Regards,
    Andy

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.