Issue with margin-bottom and wordpress multicurrency dropdown

  • Hi:

    I have set up a multicurrency converter dropdown (with woocommerce booster) just above the “add-to-basket” button. It has the right padding/ margin in the desktop version but in the mobile version (I am using jetpack mobile theme) the dropdown is literally touching the add to basket button, which makes for very bad design.

    Using inspect element in the mobile version of the website, I am able to add a margin-botom value and it works great.

    element {
    margin-bottom: 1em;
}

However, when I then add the below code to the custom css in the customiser, it does not work. 

#wcj-currency-select {
    margin-bottom: 1em;
}

    Can anyone help me please? I don’t know what to write instead of the work “element”. I assume #wcj-currency-select is not the correct thing to write…

    Thanks in advance

    The page I need help with: [log in to see the link]

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

  • No, you can not use the word Element – it is a generic name that the browser gives to the hilighted item.

    To target an element you must use it’s css class or id. To target an element at a specific screen size (mobile) you need to add a media query.

    Hi, samuelmartin,

    I have checked at my end and I am not seeing any such issue in mobile version but still if you want to write the CSS try this:

    .single-product select#wcj-currency-select {
    margin-bottom: 1em !important;
}

    Hopefully, it will help you.

    Thanks

    Kristina

    (@kristinaplauche)

    Automattic Happiness Engineer

    Hi there!

    I understand you correctly targeted the element on the desktop version, but it’s not working on mobile. Do I understand that correctly?

    It seems that site has 2 media queries that are both targeting the same screensize.

    @media screen and (min-width:768px)

    I believe that is why your code above isn’t working. It’s not targeting the right screen size.

    You should use something like `media screen and (max-width:768px) { }’ in the css. I hope that helps.

    Thread Starter samuelmartin

    (@samuelmartin)

    Thanks Kristina and prashantvatsh.

    Following both your advice I use the css below but in the jetpack mobile theme the currency switcher still remains stuck to the “add to basket” button. Prashantvatsh, I used your css as you wrote it but didn’t affect the element in the jetpack mobile theme.

    @media screen and (max-width:768px) {
    .single-product select#wcj-currency-select {
    margin-bottom: 1em !important;
    } }

    Just to be clear, the element shows perfect in the desktop version and the responsive version of the theme. However for mobile devices I am using the jetpack mobile theme because I like the symmetry of the theme in small screens. It is in this theme, the jetpack mobile theme where this issue is happening… Can you let me know if the css above feels right? At the moment there are no changes to the currency switcher element’s margin-bottom in the jetpack mobile.

    Thanks in advance

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Issue with margin-bottom and wordpress multicurrency dropdown’ is closed to new replies.