Верстка, CSS, HTML, SVG

Динамическое изменение содержимого контейнеров в CSS. Нужна помощью

Добрый вечер.
Пишу сайт самостоятельно - опыт у меня не большой, вот столкнулся с проблемой, которую никак не могу решить:

При изменении масштаба страницы сайта, содержимое блоков и сами они ни как не меняется. Помогите пожалуйста.

Мой стиль СSS:

export const gallery = styled.div`

.wrapper {
display: flex;
width: 100%;
height: 0;
}

.pokemon {
display: block;
flex-direction: row;
width: 250px;
height: 250px;
margin: auto;
box-shadow: 0 0 0 75px inset, 0 0 3px #45BF32;
/* hover out transition */
transition: box-shadow 1.5s;
float: left;
margin: 10px;
}



.pokemon::after {
width: 100%;
height: 100%;
font: 15pt 'sigmar one';
color: white;
border: 1mm ridge rgb(123, 199, 237);
text-align: center;
/* center content using flex box */
display: flex;
justify-content: center;
align-items: center;
/* hover out transition */
transition: opacity 1s .5s;
}





.pokemon:hover {
flex-direction: row;
box-shadow: 0 0 0 5px inset, 0 0 5px grey, 0 0 10px grey inset;
transition: box-shadow 1s;
}




.pokemon:hover::after {
opacity: 3;
transition: opacity .5s;
}


#bulbasaur {

background-image: url(/config/images/14.png);
color: rgba(109, 176, 209, .8);
}



#charmander {
background-image: url(config/images/15.png);
color: rgba(109, 176, 209, .8);
}



#squirtle {
background-image: url(config/images/15.png);
color: rgba(109, 176, 209, .8);
}


}

#pikachu {
background-image: url(config/images/15.png);
color: rgba(109, 176, 209, .8);
}
`;

Код в HTML:

< s.gallery >

<div id="wrapper">
<div id="bulbasaur" class="pokemon"></div>
<div id="charmander" class="pokemon"></div>
<div id="squirtle" class="pokemon"></div>
<div id="pikachu" class="pokemon"></div>
<div id="squirtle" class="pokemon"></div>
<div id="bulbasaur" class="pokemon"></div>
<div id="charmander" class="pokemon"></div>
<div id="squirtle" class="pokemon"></div>
<div id="pikachu" class="pokemon"></div>
<div id="squirtle" class="pokemon"></div>
</div>

</ s.gallery >


Уменьшаю и увеличиваю страницу, а размер блока не изменяется, он как был 250х250, так и есть.
Подскажите пожалуйста, где я ошибку допустил?
Заранее Спасибо!
Владимир Владимирович
Владимир Владимирович
114 
 .pokemon { 

  display: block; 

  flex-direction: row; 

  width: 10vw; /* Пример использования vw */ 

  height: 10vw; /* Пример использования vw для пропорциональной высоты */ 

  margin: auto; 

  box-shadow: 0 0 0 3vw inset, 0 0 3px #45BF32; /* Пример использования vw */ 

  /* hover out transition */ 

  transition: box-shadow 1.5s; 

  float: left; 

  margin: 1vh; /* Пример использования vh для отступа */ 

}
ВК
Виталий Карпенко
55 483
Лучший ответ
Владимир Владимирович Спасибо, получилось по вашему примеру.
1) opacity 3 не бывает, величина колеблется от 0 до 1 то есть исчисляется в десятых то есть 0.1 0.2 и т д как в rgba

2) float применять только для обтекания а не для построения сетки, используйте для сетки grid или flex

3) два одинаковых id на одной и той странице не допустимо и скорее всего javascript вам должен сообщить об этом, если есть нужда использовать какой то id много раз то применяйте data-id и делайте выборку в js по querySelecrorAll

4) то что у вас при зуме блоки просто увеличивпются так это верное поведение так как эффект такой как будто вы навели увеличительное стекло
Bek Batirshaev
Bek Batirshaev
66 671 
 export const gallery = styled.div` 

 

.wrapper { 

  display: flex; 

  width: 100%; 

  height: auto; /* Изменено с 0 на auto */ 

} 

 

.pokemon { 

  width: 100%; 

  height: 100%; 

} 

 

.pokemon::after { 

  width: 100%; 

  height: 100%; 

  font: 15pt 'sigmar one'; 

  color: white; 

  border: 1mm ridge rgb(123, 199, 237); 

  text-align: center; 

  display: flex; 

  justify-content: center; 

  align-items: center; 

} 

 

.pokemon:hover { 

  flex-direction: row; 

  box-shadow: 0 0 0 5px inset, 0 0 5px grey, 0 0 10px grey inset; 

} 

 

.pokemon:hover::after { 

  opacity: 1; /* Изменено с 3 на 1 */ 

} 

 

#bulbasaur { 

  background-image: url(/config/images/14.png); 

  color: rgba(109, 176, 209, .8); 

} 

 

#charmander { 

  background-image: url(config/images/15.png); 

  color: rgba(109, 176, 209, .8); 

} 

 

#squirtle { 

  background-image: url(config/images/15.png); 

  color: rgba(109, 176, 209, .8); 

} 

 

#pikachu { 

background-image: url(config/images/15.png); 

color: rgba(109,176,209,.8); 

} 

`;
Александр Зиборов
Александр Зиборов
25 860

Похожие вопросы