Html Question posted in
Some basic documentation can be found here.

Html – Issue with margin / padding right not applying on a scrollable element for mobile

I’m trying to build an icon container that shows on mobile devices using ReactJS and CSS. The issue I have is that I want to apply some space on the right and left of the container to make it look cleaner but this space is not applying on the right side of the container:

Left side (green is the space I want on the right side too)

Right side (red shows the space is missing)

The structure I’m using is the following:

<div className={isMobile ? "mcw-editor-icons-mobile" : "mcw-editor-icons"}>
    <div className={isMobile ? "mcw-editor-icons-wrapper-mobile" : "mcw-editor-icons-wrapper"}>
        // Multiple icons...
    </div>
</div>

.mcw-editor-icons-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-x: scroll;
    background: white;
    box-shadow: 0 2px 2px 2px lightgray;
    border-radius: 10px 10px 0 0;
    padding: 10px 0;
}

.mcw-editor-icons-wrapper-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}

.mcw-editor-icon {
    width: 35px;
    height: 35px;
    padding: 5px;
}

And I have tried multiple things such as adding margin: 0 20px on class mcw-editor-icons-wrapper-mobile or changing the padding on mcw-editor-icons-mobile to padding: 0 20px with the same issue as the screenshots.

How can I add the same spacing on the right side as the left side?

Tags:

2

Answers


  1. 0

    Use clac function
    like :
    margin-left: clac((100% – 300px)/2);
    Or
    lift: clac((100% – 300px)/2);

    Login or Signup to reply.
  2. 0

    So what happens if you just add some margin to the mcw-editor-icons-wrapper-mobile class like below? (assuming the icons live in it)

    This is the icons container (assume // multiple icons is your icons, as you didn’t provide them in your question and the issue could be related to them and not the padding/margin of the parent) and it has a margin between itself and its parent of 1rem from both right and left. Does this not work for you?

    .mcw-editor-icons-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-x: scroll;
    background: white;
    box-shadow: 0 2px 2px 2px lightgray;
    border-radius: 10px 10px 0 0;
    padding: 10px 0;
}

.mcw-editor-icons-wrapper-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    /** The margin */
    margin: 0 1rem;
    /** Highlight border */
    border: 1px solid red;
}

.mcw-editor-icon {
    width: 35px;
    height: 35px;
    padding: 5px;
}
    <div class="mcw-editor-icons-mobile">
    <div class="mcw-editor-icons-wrapper-mobile">
        // Multiple icons...
    </div>
</div>

    I suspect your issue might be related to your bottom row of icons having horizontal scroll. In that case, you must add the padding/margin to the parent but no overflow-x styles. The child container, where the icons live and can be scrolled, shouldn’t have any margin/padding but overflow-x enabled instead.

    Hope this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search