1

I have this code for making a cards stackable box. The problem is that this box is showing me a right paddding in the fragment, can anyone help me?

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./semantic/semantic.css"/>
    <title>Agora</title>
</head>
<body>
<div class="ui teal inverted menu" style="border-radius: 0px;">
    <div class="item">
        <div class="huge ui buttons">
        <div class="ui button">One</div>
        <div class="ui button">Two</div>
        <div class="ui button">Three</div>
    </div>
    </div>
    <div class="item">
        <div class="ui button">Log-in</div>
    </div>
</div>

<div class="ui column centered grid">
    <div class="fourteen wide column">
        <div class="ui center aligned segment">


            <div class="ui stackable four column centered grid" >
                <div class="column">
                    <div class="ui card">
                        <div class="image">
                            <img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
                        </div>
                        <div class="content">
                            <a class="header">Stevie Feliciano</a>
                            <div class="meta">
                                <span class="date">Joined in 2014</span>
                            </div>
                            <div class="description">
                                Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
                            </div>
                        </div>
                        <div class="extra content">
                            <a>
                                <i class="user icon"></i>
                                22 Friends
                            </a>
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="ui card">
                        <div class="image">
                            <img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
                        </div>
                        <div class="content">
                            <a class="header">Stevie Feliciano</a>
                            <div class="meta">
                                <span class="date">Joined in 2014</span>
                            </div>
                            <div class="description">
                                Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
                            </div>
                        </div>
                        <div class="extra content">
                            <a>
                                <i class="user icon"></i>
                                22 Friends
                            </a>
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="ui card">
                        <div class="image">
                            <img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
                        </div>
                        <div class="content">
                            <a class="header">Stevie Feliciano</a>
                            <div class="meta">
                                <span class="date">Joined in 2014</span>
                            </div>
                            <div class="description">
                                Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
                            </div>
                        </div>
                        <div class="extra content">
                            <a>
                                <i class="user icon"></i>
                                22 Friends
                            </a>
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="ui card">
                        <div class="image">
                            <img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
                        </div>
                        <div class="content">
                            <a class="header">Stevie Feliciano</a>
                            <div class="meta">
                                <span class="date">Joined in 2014</span>
                            </div>
                            <div class="description">
                                Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
                            </div>
                        </div>
                        <div class="extra content">
                            <a>
                                <i class="user icon"></i>
                                22 Friends
                            </a>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>




</body>
</html>

This is the problem image: https://i.sstatic.net/90qev.png

I need to remove the padding that's in the right side.

Improve this question

2 Answers 2

Reset to default
1

Here is the working example:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
    <title>Agora</title>
    <style type="text/css">
    .ui.card {
margin: auto;
}
    </style>
</head>
<body>
<div class="ui teal inverted menu" style="border-radius: 0px;">
    <div class="item">
        <div class="huge ui buttons">
        <div class="ui button">One</div>
        <div class="ui button">Two</div>
        <div class="ui button">Three</div>
    </div>
    </div>
    <div class="item">
        <div class="ui button">Log-in</div>
    </div>
</div>

<div class="ui column centered grid">
    <div class="fourteen wide column">
        <div class="ui center aligned segment">


            <div class="ui stackable four column centered grid" >
                <div class="column">
                    <div class="ui card">
                        <div class="image">
                            <img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
                        </div>
                        <div class="content">
                            <a class="header">Stevie Feliciano</a>
                            <div class="meta">
                                <span class="date">Joined in 2014</span>
                            </div>
                            <div class="description">
                                Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
                            </div>
                        </div>
                        <div class="extra content">
                            <a>
                                <i class="user icon"></i>
                                22 Friends
                            </a>
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="ui card">
                        <div class="image">
                            <img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
                        </div>
                        <div class="content">
                            <a class="header">Stevie Feliciano</a>
                            <div class="meta">
                                <span class="date">Joined in 2014</span>
                            </div>
                            <div class="description">
                                Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
                            </div>
                        </div>
                        <div class="extra content">
                            <a>
                                <i class="user icon"></i>
                                22 Friends
                            </a>
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="ui card">
                        <div class="image">
                            <img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
                        </div>
                        <div class="content">
                            <a class="header">Stevie Feliciano</a>
                            <div class="meta">
                                <span class="date">Joined in 2014</span>
                            </div>
                            <div class="description">
                                Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
                            </div>
                        </div>
                        <div class="extra content">
                            <a>
                                <i class="user icon"></i>
                                22 Friends
                            </a>
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="ui card">
                        <div class="image">
                            <img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
                        </div>
                        <div class="content">
                            <a class="header">Stevie Feliciano</a>
                            <div class="meta">
                                <span class="date">Joined in 2014</span>
                            </div>
                            <div class="description">
                                Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
                            </div>
                        </div>
                        <div class="extra content">
                            <a>
                                <i class="user icon"></i>
                                22 Friends
                            </a>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>




</body>
</html>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

It might be a problem that each of these cards do not fill the width of their column so they are aligned to the left.

You could use the class ".cards" which is mentioned here (it uses flexbox to fit the cards perfectly).

The code found in documentation:

<div class="ui cards">

  <div class="card">
    <a class="image">
      <img src="/images/avatar/large/elliot.jpg">
    </a>
    <div class="content">
      <a class="header">Elliot Fu</a>
      <div class="meta">
        <a>Friends</a>
      </div>
      <div class="description">
        Elliot Fu is a film-maker from New York.
      </div>
    </div>
  </div>

  <div class="card">
    <a class="image">
      <img src="/images/avatar/large/helen.jpg">
    </a>
    <div class="content">
      <a class="header">Helen Troy</a>
      <div class="meta">
        <a>Friends</a>
      </div>
      <div class="description">
        Helen Troy is an archivist living in New York, who enjoys cooking, fine art, and gardening.
      </div>
    </div>
  </div>

</div>
Improve this answer

2 Comments

But i want the cards to be centered... How i do that?
Sorry, I did not get it from the description. Well, if you want the cards centered inside of the columns, you could set text-align: center to the column (and maybe set the padding right to 0). If the .card has fixed width you should use margin: 0 auto.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.