CODEWITHSUNDEEP
htmlcss
Emanuele
Emanuele

Reputation: 2394

How to properly position buttons inside a grid-layout to be responsive

I am using react-strap cards. In the application I have a lot of cards like the print-screen below.

The problem is that it does not look very good because as I shrink the application all the buttons do not preserve a proper position and instead of wrapping nicely they seem to have a strange position.

Below is how the card is structured:

layout

App.js

        <div class="btn-toolbar">
            <Row>
                <Col>
                    <a class="btn btn-primary" role="button" href={example2}>
                        Project Notes
                    </a>
                </Col>
                <Col>
                    <a class="btn btn-primary" role="button" href={example2}>
                        Location Map
                    </a>
                </Col>
               {/* Other Cols... */}
            </Row>
            <Row style={{ marginTop: '20px' }}>
                <Col>
                    <a class="btn btn-primary" role="button" href={example2}>
                        Borrow Area Info
                    </a>
                </Col>
                <Col>
                    <a class="btn btn-primary" role="button" href={example2}>
                        Solicitation
                    </a>
                </Col>
               {/* Other Cols... */}
            </Row>
        </div>

App.css

.btn-primary {
    display: inline-block;
    text-decoration: none;
    letter-spacing: var(--mainSpacing);
    color: var(--mainBlack);
    background: var(--shadowGreen);
    padding: 0.4rem 0.9rem;
    border: 3px solid var(--shadowGreen);
    transition: var(--mainTransition);
    text-transform: uppercase;
    cursor: pointer;
}

What I have done so far:

I think the problem might be in the .css file. I don't have any settings in particular for that because I don't know if the card can be affected other than the one I posted above. Is the problem due to a missing grid-layout? If so How can I fix that so that the buttons can wrap nicely when I shrink/enlarge the application?

Thank you very much for pointing to the right direction.

Upvotes: 1

Views: 998

Answers (2)

JayDJohno
JayDJohno

Reputation: 99

Here is an example of what i mean.

.cardcontainer
{
  width:100vw;
  margin-bottom:20px;
}

.buttoncontainer
{
    width:100vw;
}

.button
{
  float:left;
  width:25%;
  margin-bottom:20px;
}
<div class="cardcontainer">
   <img src="https://images.pexels.com/photos/813011/pexels-photo-813011.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Italian Trulli">
</div>

<div class=buttoncontainer>
  <div class="button">
     <button type="button">Button</button> 
  </div>
   <div class="button">
     <button type="button">Button</button> 
  </div>
   <div class="button">
     <button type="button">Button</button> 
  </div>
   <div class="button">
    <button type="button">Button</button> 
  </div>
</div>

And a fiddle

https://jsfiddle.net/4mfpr8kv/

Upvotes: 1

JayDJohno
JayDJohno

Reputation: 99

You have no fixed widths or heights set on your css.

I would say use a parent div with the width and height you need, then use CSS to detect media screen size and adjust the width based on the screen sizes.

Then for your cards set the width and height to 100% of the parent div, then this will keep its scale and other items will wrap nicely around them.

Then for the buttons set each of them inside a parent div, set the parent divs width as well, with media screen statement.

Then each button should be wrapped in a container, with a width of 25%% and float left. Then the buttobs will scaled and adjust nicely.

Upvotes: 0

Related Questions