chciałbym żeby zdjęcia schodziły na dół przy zmniejszaniu rozdzielczości

Question

mam po prostu galerię i chciałbym żeby zdjęcia schodziły na dół przy zmniejszaniu i nw jak to zrobić, jak zmniejszam rozdzielczość strony to mi po prostu zasłania i pokazuje mi się suwak na dole do przesuwania w bok :/ a chciałbym tylko suwak po prawej, pomoże ktos? żeby zdjęcia się dostosowywały do strony i schodziły o blok niżej jak brakuje miejsca, nw czy dobrze wytłumaczyłem o co mi chodzi :D proszę o pomoc :/

Comments

a ja bym chciał chociaż widzieć trochę kodu ... ;) bo tak ciężko się do czegoś odnieść

---

To juz zrobiłem, dodałem po prostu display:inline; i flex:wrap;

ale teraz mam inny problem, pojawił mi się na dole suwak, taki delikatny ale jest i mnie drażni :) jak go skasować

 

a tu kod css:

body
{
    background-color: #FFFFFF;
    color: #000000;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    margin: 0 !important;
}

.wrapper
{
    width: 100%;
}

.header
{
    width:100%;
    padding: -222px 0;
}

.nav
{
    width: 100%;
    padding: 10px 0;
    background-color: #FFFFFF;
    text-align: left;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
list-style-type: none;
}
.prawa{
    float: right;
    display:inline;
}
    

div.j {
  width: 610px;
  height: 35px;
  float: left;
  padding: 5px 5px 0 0;
  background-color: #0168b3;
  text-align: center;
  }
div.srodek {
  height: 35px;
  width: 40px;
  margin-left: auto;
  margin-right: auto;
 }
div.prawa {
  height: 35px;
  width: 300px;
  float: left;
 }

.content
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    padding-top: 10px;
}

.socialdivs
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.footer
{
    text-align: center;
    background-color: #000000;
    padding: 30px;
}

.sticky
{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
}

ol
{
    padding: 0;
    margin: 0;
    list-style-type: none;
    font-size: 18px;
    height: 35px;
    line-height: 200%;
    display: inline-block;
}

/* menu boczne */

.site-nav {
  display: flex;
  justify-content: left;
  align-items: center;
  padding: 19px;
  box-sizing: border-box;
  height: 10px;
  width: 100%;
}

.side-menu-trigger {
  border: 0;
  border-radius: 5px;
  background: #ffffff;
  
}

.side-menu {
  display: flex;
  box-sizing: border-box;
  position: absolute;
  height: 866px;
  width: 160px;
  top: 66px;
  left: -300px;
  padding: 0;
  background: #f0f0f0;
  transition: 0.3s transform ease-in-out;
}

.side-menu ul {
  position: absolute;
  display: flex;
  height: calc(100% - 20px);
  flex-wrap: wrap;
  margin-right:10px;
  padding: 0;
  list-style-type: none;
  align-content: flex-start
}

.side-menu ul li {
  display: flex;
  height: 66px;
  background: #f0f0f0;
  flex-basis: 100%;
  margin-top: 30px;
  color: #000000;
  border-radius: 0px;
  overflow: hidden;
  
}

.side-menu ul li a {
    display: flex;
    padding: 10px;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f0f0f0;
    text-decoration: none;
    box-sizing: border-box;
}

.side-menu-trigger:focus ~ .side-menu, .side-menu:hover {
  transform: translateX(300px);
}

/* menu boczne2 */

.site-nav2 {
  display: flex;
  justify-content: left;
  align-items: center;
  padding: 19px;
  box-sizing: border-box;
  height: 10px;
  width: 100%;
}
.side-menu-trigger2 {
  border: 0;
  border-radius: 5px;
  background: #ffffff;
  
}
.side-menu2 {
  display: flex;
  box-sizing: border-box;
  position: absolute;
  height: 1000px;
  width: 240px;
  top: 66px;
  right: -300px;
  padding: 0;
  background: #f0f0f0;
  transition: 0.3s transform ease-in-out;
}

/* galeria */

.photo {
  margin: 10px 0;
  width: 222px;
  background: white;
  padding: 10px;
  
  border-radius: 5px;
  border: 1px solid silver;
  box-sizing: border-box;
margin-left:5px;

display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  
  
  transition: 0.3s all ease-in-out;
  
  align-items: flex-start;
}

.photo img {
  flex-basis: 100%;
  width: 100px;
}

.photo figcaption {
  margin-top: 0px;
}

.photo:hover {
  opacity: 1;
  transform: scale(1.1);
}

.box {
height:222px;
width:222px;
margin-right:20px;
margin-bottom:30px;
background:#000000;
float:center;
}

/* zawartość strony */

#container3
{

clear:both;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
background:#818181;
}

#container2
{
display:inline;
flex:wrap;

    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#logo
{
    color: black;
    margin-top: 20px;
margin-left:20px;
    font-size: 44px;
    letter-spacing: 3px;
    font-weight: 900;
}

/*#menu
{
    background-color: #303030;
    margin-top: 20px;
    color: #ffffff;
    padding: 10px;
    
} */

#topbar
{
    background-color: #128870;
    color: white;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 15px;
    height: 170px;
}

#topbarL
{
    float:left;
    padding: 20px;
    width: 138px;
    text-align: center;
    border-right: 2px dotted #cccccc;
}

#topbarR
{
    float: left;
    padding: 20px;
    width: 760px;
    font-size: 16px;
    text-align: justify;
}

#sidebar
{
    float: right;
    width: 148px;
    min-height: 620px;
    padding:20px;
    background-color: lightgray;
    text-align: center;
    font-size: 18px;
    border-right: 2px dotted #666666;
}

#content
{

    float: left;
    padding: 10px;
    width: 210px;
    background-color: #ffffff00;
    min-height: 180px;
    text-align: justify;
    margin-left:5px;
}
#content2
{

    float: left;
    padding: 10px;
    width: 210px;
    background-color: #dedede;
    min-height: 180px;
    text-align: justify;
margin-left:5px;
}
#content3
{

    float: left;
    padding: 10px;
    width: 210px;
    background-color: #dedede;
    min-height: 180px;
    text-align: justify;
    margin-left:5px;
}
#footer
{
    clear: both;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 18px;
}

.option
{
    float: left;
    min-width: 50px;
    height: 25px;
    font-size: 18px;
    padding: 10px;
    border-right: 2px dotted #444444;
    opacity: 0.8;
}

.option:hover
{
    background-color: #000000;
    cursor: pointer;
}

.optionL
{
    font-size:18px;
    height:25px;
    padding: 10px;
    border-bottom: 2px dotted #444444;
}

.optionL:hover
{
    background-color: #f36742;
    color: white;
    cursor: pointer;
}

.bigtitle
{
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 2px;
}

.dottedline
{
    height: 5px;
    margin-top: 15px;
    margin-bottom: 20px;
    border-bottom: 2px dotted #444444;
}

/* ładowanie */

.entry {
  background: #8d92be;
  border-radius: 15px;
  max-width: 400px;
  color: #ffffff;
  padding: 15px;
}

.entry h2 {
  margin: 0;
  font-size: 1.6em;
}

.entry h2:empty {
  background: #ffffff;
  height: 1.6em;
  width: 300px;
  border-radius: 0.5em;
}

.entry figure {
  display: flex;
  align-items: center;
  margin: 0;
}

.entry .avatar {
  width: 40px;
  height: 40px;
  margin-right: 20px;
  background-color: #ffffff;
  border-radius: 10px;
}

.entry p:empty {
  min-height: 70px;
}

.entry p:empty::after, .entry p:empty::before, .entry .author:empty {
  content: "";
  display: block;
  height: 1em;
  background: #c9c9c9;
  border-radius: 1em;
}

.entry p:empty::after {
  width: 50%;
}

.entry p:empty::before {
  width: 70%;
  margin-bottom: 0.5em;
  box-shadow: 0 3em 0 #c9c9c9;
}

.entry .author:empty {
  width: 50%;
}

---

Spróbuj z overflow-x hidden :)

Answer 1

Display flex na container. flex wrap.  I wyłącz overflow

Comments

teraz ustawiło mi się tak jak wgl nie chciałem :/ mam suwak na dole wszystkie zdjęcia ustawiły mi się w poziomie :/

---

Ponieważ nie masz ustawionego flexa. :). Jak dobrze pamiętam to flex-basis

---

do conteiner dodałe flex:wrap i display:inline i działa tak jak chciałem może tak być chyba?

---

Jak nic nie dokładają do układu to tak. :)