Full-Width Image Grid/Container with Semantic-UI

Asked

Viewed 360 times

1

I know the question is kind of abstract, but how to do this:

inserir a descrição da imagem aqui

With the Semantic-UI?

That is, a set of Thumbs without margin or edge, occupying 100% of the width and responsive mode?

Fez here, but it didn’t get very cool no, it got a blank on the right side.

CSS

.capa {
  margin: 0!important;
  width: auto!important;
  height: 220px!important;
}

HTML

<div class="ui main fluid container">
  <div class="ui blue inverted segment divisor">
    <h4>Lançamentos</h4>
  </div>
  <div class="ui small images">
    <a href="tocar.php?id=276">
      <img class="capa" src="imagem.jpg">
    </a>
  </div><!-- Fim Image Group -->
</div><!-- Fim Container -->

Thanks in advance.

EDITED

Unfortunately I switched Semantic-UI to Twitter Bootstrap 4 because I could not solve.

The colleague’s help was unavoidable!

HTML 

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-1 no-margin">
      <a href="tocar.php?id={$info[0]}">
        <img src="{$info[5]}" width="100%" class="capa" />
      </a>
    </div>
  </div><!-- Row -->
</div><!-- Container -->

CSS

.row .no-margin {
  margin: 0;
  padding: 0;
}

.capa {
  max-height: 220px;
}
html css semantic-ui

1 answer

2


To do with the bootstrap. Now it’s just a matter of adjusting the sizes you need.

.row .no-margin {
    margin: 0;
    padding: 0;
}

.row.cover-list {
  margin-right: 0;
  margin-left: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row cover-list">
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
    <div class="col-xs-2 no-margin">
        <img src="http://placehold.it/150x350" width="100%" class="img-responsive" />
    </div>
</div>

  • Perfect! Too bad I didn’t get it with Semantic-UI, but it’s worth it. Thank you.

  • I hadn’t paid attention, but there’s a horizontal scrollbar popping up, which I’m doing wrong?

  • I changed the code a little bit, added the class cover-listin div.row and I took the left and right margins and then the horizontal scroll disappeared.

Browser other questions tagged html css semantic-ui

You are not signed in. Login or sign up in order to post.