закончил адаптацию стилей
This commit is contained in:
Joe_Peach committed
1 parent
9e0c44a0c9
commit
acaf65b066
14 files changed
+637
-44
No files matched your search
@@ -66,6 +66,26 @@ filter: brightness(0.5)
|
||||
}
|
||||
|
||||
/* --- Mobile Adaptive --- */
|
||||
|
||||
@media (max-width: 890px){
|
||||
.slide {
|
||||
height: 600px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 665px){
|
||||
.textBlock h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
|
||||
.textBlock h2 {
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.slide {
|
||||
height: 500px;
|
||||
|
||||
@@ -20,3 +20,11 @@ background: #ffe667;
|
||||
.button:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
@media (max-width: 768px){
|
||||
.button{
|
||||
padding: 0 30px;
|
||||
font-size: 12px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
@@ -115,6 +115,24 @@ grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 665px){
|
||||
.header {
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
|
||||
.overlay h3 {
|
||||
font-size: 16px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.overlay h4 {
|
||||
margin-top: 4px;
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.grid {
|
||||
|
||||
@@ -19,6 +19,14 @@
|
||||
max-height: 600px;
|
||||
}
|
||||
|
||||
.title{
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.subtitle{
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
width: 100%;
|
||||
height: 100%; /* Добавьте высоту 100% */
|
||||
@@ -79,3 +87,9 @@ position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 665px){
|
||||
.arrow {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
@@ -83,7 +83,7 @@ color: #fff;
|
||||
/* Mobile */
|
||||
@media (max-width: 900px) {
|
||||
.container {
|
||||
flex-direction: column;
|
||||
|
||||
gap: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -93,3 +93,121 @@ text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px){
|
||||
.logo {
|
||||
width: 40px;
|
||||
opacity: 0.9;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
|
||||
.left {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.copy {
|
||||
font-size: 10px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.center a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
.phone {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
.mail {
|
||||
margin-top: 6px;
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
|
||||
.mail:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 460px){
|
||||
.logo {
|
||||
width: 40px;
|
||||
opacity: 0.9;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
|
||||
.left {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.copy {
|
||||
font-size: 10px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.center a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
.phone {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
.mail {
|
||||
margin-top: 6px;
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
|
||||
.mail:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import styles from "./Footer.module.css";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import blackLogo from '../../assets/images/BlackLogo.jpg'
|
||||
import blackLogo from "../../assets/images/BlackLogo.jpg";
|
||||
|
||||
const Footer: React.FC = () => {
|
||||
return (
|
||||
@@ -12,14 +12,12 @@ return (
|
||||
<span className={styles.copy}>РК Plastic. 2015-2026 ©</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div className={styles.center}>
|
||||
<NavLink to="about">O КОМПАНИИ</NavLink>
|
||||
<NavLink to="products">ПРОДУКЦИЯ</NavLink>
|
||||
<NavLink to="products">ПРАЙС-ЛИСТ</NavLink>
|
||||
</div>
|
||||
|
||||
|
||||
<div className={styles.right}>
|
||||
<div className={styles.phone}>+7 910 121 09 62</div>
|
||||
<a className={styles.mail}>rkplastic@mail.ru</a>
|
||||
@@ -29,5 +27,4 @@ return (
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export default Footer;
|
||||
@@ -214,3 +214,13 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px){
|
||||
.logoImage {
|
||||
height: 60px;
|
||||
border-radius: 8px;
|
||||
object-fit: contain;
|
||||
transition: all 0.3s ease;
|
||||
/*filter: brightness(0) invert(1);*/
|
||||
}
|
||||
}
|
||||
@@ -91,6 +91,19 @@
|
||||
|
||||
/* --- MOBILE --- */
|
||||
|
||||
@media (max-width: 1300px){
|
||||
.phoneInfo {
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
|
||||
}
|
||||
|
||||
.phoneNumber {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.inner {
|
||||
flex-direction: column;
|
||||
@@ -123,3 +136,35 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 665px){
|
||||
.title {
|
||||
font-size: 28px;
|
||||
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #2a2a2a;
|
||||
}
|
||||
|
||||
.phoneNumber {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.phoneInfo {
|
||||
margin-left: 44px;
|
||||
margin-top: -5px;
|
||||
font-size: 10px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.formLabel {
|
||||
margin-top: 40px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -18,6 +18,12 @@
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.cardContent{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border: 1px solid #e5e5e5;
|
||||
@@ -25,7 +31,6 @@
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
@@ -45,53 +50,234 @@
|
||||
}
|
||||
|
||||
.plus {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
|
||||
font-size: 22px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #ffcc00;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
/*SidebarCategories*/
|
||||
.sidebar { width: 260px; padding: 20px 0; }
|
||||
.title { font-weight:700; font-size:14px; margin-bottom:16px; }
|
||||
.list { list-style:none; padding:0; margin:0; }
|
||||
.item { padding:8px 0; color:#666; cursor:pointer; transition:color .15s; }
|
||||
.item:hover { color:#000; }
|
||||
.activeCat { color:#000; font-weight:700; }
|
||||
.sidebar {
|
||||
width: 260px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.item {
|
||||
padding: 8px 0;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.item:hover {
|
||||
color: #000;
|
||||
}
|
||||
.activeCat {
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
}
|
||||
/*SidebarCategories*/
|
||||
|
||||
/*Pagination*/
|
||||
.wrap{ display:flex; gap:12px; align-items:center; justify-content:center; margin:30px 0;}
|
||||
.go{ padding:8px 14px; background:#fff;border:1px solid #ddd; cursor:pointer;}
|
||||
.pages{ display:flex; gap:8px;}
|
||||
.page{ padding:8px 12px; background:#fff;border:1px solid #ddd; cursor:pointer;}
|
||||
.active{ background:#ffd400; font-weight:700; border-color:#ffd400;}
|
||||
button:disabled{ opacity:.5; cursor:default;}
|
||||
.wrap {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 30px 0;
|
||||
}
|
||||
.go {
|
||||
padding: 8px 14px;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pages {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.page {
|
||||
padding: 8px 12px;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active {
|
||||
background: #ffd400;
|
||||
font-weight: 700;
|
||||
border-color: #ffd400;
|
||||
}
|
||||
button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
/*Pagination*/
|
||||
|
||||
/*CategoryFilters*/
|
||||
.filtersWrap { margin:24px 0; }
|
||||
.title { font-weight:700; margin-bottom:12px; }
|
||||
.block { margin-bottom:16px; }
|
||||
.blockTitle{ font-weight:600; margin-bottom:8px; }
|
||||
.opt { display:block; margin:6px 0; font-size:14px; }
|
||||
.actions { margin-top:12px; display:flex; gap:12px; }
|
||||
.apply { background:#ffd400; border:none; padding:10px 22px; border-radius:26px; cursor:pointer;}
|
||||
.reset { background:#fff; border:1px solid #ddd; padding:8px 16px; cursor:pointer;}
|
||||
.filtersWrap {
|
||||
margin: 24px 0;
|
||||
}
|
||||
.title {
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.block {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.blockTitle {
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.opt {
|
||||
display: block;
|
||||
margin: 6px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.actions {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
.apply {
|
||||
background: #ffd400;
|
||||
border: none;
|
||||
padding: 10px 22px;
|
||||
border-radius: 26px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.reset {
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
/*CategoryFilters*/
|
||||
|
||||
.categoryGrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
|
||||
.categoryCard { border:1px solid #e7e7e7; padding:26px; text-align:center; cursor:pointer; transition:box-shadow .15s; }
|
||||
.categoryCard:hover { box-shadow:0 6px 18px rgba(0,0,0,0.06); }
|
||||
.categoryImg { max-width:160px; height:auto; display:block; margin:0 auto 14px; }
|
||||
.categoryName { font-weight:700; }
|
||||
@media(max-width:1090px){ .grid{grid-template-columns:repeat(2,1fr)} }
|
||||
.categoryGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
.categoryCard {
|
||||
border: 1px solid #e7e7e7;
|
||||
padding: 26px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.15s;
|
||||
}
|
||||
.categoryCard:hover {
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.categoryImg {
|
||||
max-width: 160px;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 0 auto 14px;
|
||||
}
|
||||
.categoryName {
|
||||
font-weight: 700;
|
||||
}
|
||||
@media (max-width: 1090px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:600px){ .grid{grid-template-columns:1fr} }
|
||||
@media (max-width: 664px){
|
||||
.card {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.name{
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card img {
|
||||
max-width: 130px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.title {
|
||||
font-weight: 500;
|
||||
|
||||
}
|
||||
|
||||
.blockTitle {
|
||||
font-weight: 500;
|
||||
|
||||
}
|
||||
.opt {
|
||||
font-size: 10px;
|
||||
}
|
||||
.actions {
|
||||
gap: 10px;
|
||||
}
|
||||
.apply {
|
||||
padding: 8px 18px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.reset {
|
||||
padding: 6px 14px;
|
||||
}
|
||||
/*CategoryFilters*/
|
||||
|
||||
|
||||
|
||||
.categoryGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 15px;
|
||||
}
|
||||
.categoryCard {
|
||||
border: 1px solid #e7e7e7;
|
||||
padding: 26px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.categoryImg {
|
||||
max-width: 160px;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 0 auto 14px;
|
||||
}
|
||||
.categoryName {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.wrap{
|
||||
margin: 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.go {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
.grid {
|
||||
@@ -100,11 +286,9 @@ button:disabled{ opacity:.5; cursor:default;}
|
||||
}
|
||||
|
||||
@media (max-width: 1254px) {
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1045px) {
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@@ -112,6 +296,6 @@ button:disabled{ opacity:.5; cursor:default;}
|
||||
flex-direction: column;
|
||||
}
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
@@ -21,10 +21,13 @@ const ProductCard: React.FC<Props> = ({ product }) => {
|
||||
className={styles.card}
|
||||
onClick={() => onSelect(product.id)}
|
||||
>
|
||||
|
||||
<img src={product.images[0]} alt={product.name} />
|
||||
<div className={styles.cardContent}>
|
||||
<p className={styles.name}>{product.name}</p>
|
||||
<button className={styles.plus}>+</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -76,3 +76,4 @@ button:focus-visible {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
}
|
||||
|
||||
.short{
|
||||
font-size: 14px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
@@ -59,6 +60,7 @@
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
font-size: 16px;
|
||||
color: #f5c400;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@@ -102,3 +104,170 @@
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.title{
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.hero {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.top {
|
||||
padding: 20px;
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
.right {
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
.rightContent {
|
||||
padding-right: 100px;
|
||||
}
|
||||
|
||||
.left img {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.left{
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ================= MOBILE ================= */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.top {
|
||||
padding: 15px 20px;
|
||||
padding-top: 100px;
|
||||
|
||||
}
|
||||
|
||||
.hero {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.left {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.left img {
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
.right {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.breadcrumbs{
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.title{
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.short {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 25px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.download {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tabs button {
|
||||
padding: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.attrRow {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 665){
|
||||
.download {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tabs button {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.short{
|
||||
margin-top: 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.back {
|
||||
color: white;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.left img {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.rightContent{
|
||||
padding-right: 100px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* ================= SMALL MOBILE ================= */
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.top {
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
.left img {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.right {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.download {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tabs button {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@ import type { CategoryAtributes, CategoryAtrVals } from "../../types/categories"
|
||||
import Button from "../../components/Button/Button";
|
||||
import PriceLisForm from "../../components/PriceLisForm/PriceLisForm";
|
||||
import ProductAttributes from "../../components/Table/ProducTable";
|
||||
import { p } from "framer-motion/client";
|
||||
import { p, title } from "framer-motion/client";
|
||||
|
||||
const ItemPage = () => {
|
||||
const { id } = useParams();
|
||||
@@ -50,7 +50,7 @@ const ItemPage = () => {
|
||||
ГЛАВНАЯ / {category?.name} / {product.name}
|
||||
</div>
|
||||
|
||||
<h1>{product.name}</h1>
|
||||
<h1 className={styles.title}>{product.name}</h1>
|
||||
|
||||
<p className={styles.short}>{product.description}</p>
|
||||
<Button
|
||||
|
||||
@@ -214,9 +214,7 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.catalogLayout {
|
||||
flex-direction: column;
|
||||
@@ -230,3 +228,11 @@
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px){
|
||||
.products {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Reference in new issue
Block a user