.product__wrapper {
display: grid;
grid-template-columns: auto 1fr auto auto auto;
grid-template-rows: auto auto;
align-items: flex-start;
}
.product__wrapper:before {
content: '';
grid-row: 1;
grid-column: 1 / -1;
}
.product__wrapper .image {
grid-column: 1;
grid-row: 1 / span 3;
}
.product__wrapper .article {
grid-column: 2 / span 1;
grid-row: 1;
flex-direction: row;
align-items: center;
}
.product__wrapper .naming {
grid-column: 2 / span 2;
grid-row: 2;
}
.product__wrapper .naming .label,
.product__wrapper .price .label,
.product__wrapper .quantity .label {
display: none;
}
.product__wrapper .price {
grid-column: 4 / span 2;
grid-row: 1;
}
.product__wrapper .cashback {
grid-column: 4 / span 2;
grid-row: 2;
}
.product__wrapper .availability {
grid-column: 2 / span 2;
grid-row: 3;
}
.product__wrapper .quantity {
grid-column: 1;
grid-row: 4;
}
.product__wrapper .links-product {
grid-column: 4 / span 2;
grid-row: 4;
}
.product__wrapper .availability {
display: block;
}
.product__wrapper .image {
width: 126px;
height: 100%;
}адаптировал под мобильные телефоны, планшеты и десктоп.
Было принято решение подогнать разрешение на 20 пикселей больше
ноутбук, в котором разрешение 1349px X 625 px
Гугл также не помог
.myblock input:nth-child(3) {display: none!important;};<div сlass="header"><div class="header"><!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Сайт Портфолио</title>
<!-- Нормализация стилей -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<!-- Собственные стили -->
<link rel="stylesheet" href="css/main.css">
<!-- Подключение веб-шрифтов ИКОНОК ЗНАЧКОВ -->
<link href="https://fonts.googleapis.com/css2?family=Merriweather&family=PT+Sans+Caption:wght@400;700&display=swap" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="img/favicon/favicon-16x16.ico" >
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
html {
font-family: "PT Sans Caption", sans-serif;
font-size: 16px;
line-height: 1.5;
}
.header {
background-size: cover;
background: red;
text-align: center;
}
</style>
<body>
<div class="header">
<div class="header__title">Ананьев Виталий</div>
<div class="header__slogan">Верстка сайтов на HTML и CSS <br>HTML5 CSS3 JS jQuery</div>
<div class="header__arrow">стрелка</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('input[name=sw]').click(function(){
var v = ($(this).val());
console.log(v);
if(v === 'one'){
$('#one').show();
$('#two').hide();
}
else{
$('#one').hide();
$('#two').show();
}
})
})
</script>
<script>
$(document).ready(function(){
$('input[name=sw2]').click(function(){
var v = ($(this).val());
console.log(v);
if(v === 'one1'){
$('#one1').show();
$('#two2').hide();
}
else{
$('#one1').hide();
$('#two2').show();
}
})
})
</script>
<script>
$(document).ready(function(){
$('input[name=sw3]').click(function(){
var v = ($(this).val());
console.log(v);
if(v === 'one3'){
$('#one3').show();
$('#two4').hide();
}
else{
$('#one3').hide();
$('#two4').show();
}
})
})
</script>
<style>
.none{
display:none;
}
</style>
<style>
label {
width: 19px;
height: 19px;
display: inline-block;
position: relative;
}
input[type="radio"] + .letter1 {
position: absolute;
left: 0; top: 0;
width: 100%;
height: 100%;
background: url(/upload/black.png) no-repeat;
cursor: pointer;
}
input[type="radio"] + .letter2 {
position: absolute;
left: 0; top: 0;
width: 100%;
height: 100%;
background: url(/upload/blue.png) no-repeat;
cursor: pointer;
}
input[type="radio"] + .letter3 {
position: absolute;
left: 0; top: 0;
width: 100%;
height: 100%;
background: url(/upload/black.png) no-repeat;
cursor: pointer;
}
input[type="radio"] + .letter4 {
position: absolute;
left: 0; top: 0;
width: 100%;
height: 100%;
background: url(/upload/blue.png) no-repeat;
cursor: pointer;
}
input[type="radio"] + .letter5 {
position: absolute;
left: 0; top: 0;
width: 100%;
height: 100%;
background: url(/upload/black.png) no-repeat;
cursor: pointer;
}
input[type="radio"] + .letter6 {
position: absolute;
left: 0; top: 0;
width: 100%;
height: 100%;
background: url(/upload/blue.png) no-repeat;
cursor: pointer;
}
</style>
<div class="inthis89">
<div class="block89"><div id="one"><img src="/upload/connemarabrown.png"/>
</div>
<div id="two" class="none"><img src="/upload/connemarablue.png"/>
</div>
<label><input type="radio" name="sw" value="one" checked><span class="letter2"></span></label>
<label><input type="radio" name="sw" value="two"><span class="letter1"></span></label></div>
<div class="block89"><div id="one1"><img src="/upload/connemarabrown.png"/>
</div>
<div id="two2" class="none"><img src="/upload/connemarablue.png"/>
</div>
<label><input type="radio" name="sw2" value="one1" checked><span class="letter4"></span></label>
<label><input type="radio" name="sw2" value="two2"><span class="letter3"></span></label></div>
<div class="block89"><div id="one3"><img src="/upload/connemarabrown.png"/>
</div>
<div id="two4" class="none"><img src="/upload/connemarablue.png"/>
</div>
<label><input type="radio" name="sw3" value="one3" checked><span class="letter6"></span></label>
<label><input type="radio" name="sw3" value="two4"><span class="letter5"></span></label></div>
</div>