Я использую медиа-запросы и точки останова, чтобы сделать мою веб-страницу отзывчивой. У меня есть 3 изображения с figcaptions. Все хорошо, когда три изображения в отдельных столбцах. Однако для мобильного макета все находится в одном столбце. В сафари мобильная раскладка сталкивается со следующей проблемой: изображение перекрывает figcaption. Эта проблема не возникает в Firefox или Chrome. К сожалению, поскольку я понятия не имею, что является причиной этой проблемы, я не знаю, как сжать код и воспроизвести ошибку. Я использую сетку CSS для верстки моей страницы (некоторые элементы также являются сетками). Большое вам спасибо.
Скриншоты части страницы:
Хром: (рабочий)
Снимок экрана
Safari (не работает)
Скриншот
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Name</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<div class="container">
<header class="header">
<h1 class="header-logo">D</h1>
<div class="header-text">
<h1 class="header-name">Name</h1>
<h2 class="header-title">Title</h2>
</div>
</header>
<img class="large-image" src="images/code.jpg">
<main class="main">
<h2 class="featured-work">Featured Work</h2>
<figure class="project-1">
<img src="images/project-1.jpg">
<figcaption class="caption">
<div>
<h2 class="caption-header">Project 1</h2>
<a class="caption-link" href=#>Project Link</a>
</div>
</figcaption>
</figure>
<figure class="project-2">
<img src="images/project-2.jpg">
<figcaption class="caption">
<div>
<h2 class="caption-header">Project 2</h2>
<a class="caption-link" href=#>Project Link</a>
</div>
</figcaption>
</figure>
<figure class="project-3">
<img src="images/project-3.png">
<figcaption class="caption">
<div>
<h2 class="caption-header">Project 3</h2>
<a class="caption-link" href=#>Project Link</a>
</div>
</figcaption>
</figure>
</main>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
color: #7d97ad;
font-style: normal;
overflow-x: hidden;
}
img, embed, object, video {
max-width: 100%;
}
.caption-header {
margin: 0;
color: #2d3c49;
font-size: 35px;
font-weight: 600;
}
a {
color:#337ab7;
text-decoration:none;
}
a:hover, a:focus {
color:#23527c;
text-decoration:underline;
}
a:focus {
outline:5px auto -webkit-focus-ring-color;
outline-offset:-2px;
}
.caption {
text-align: center;
}
.header-logo {
margin: 0;
color: #42c5f4;
font-size: 60px;
font-weight: bold;
text-align: center;
grid-area: hdlg;
}
.header-text {
text-align: center;
grid-area: hdtxt;
}
.header-name {
margin: 0;
font-size: 40px;
font-weight: 100;}
.header-title {
margin: 0;
font-weight: normal;
}
.featured-work {
font-weight: normal;
margin: 0;
grid-area: ftwk;
}
.project-1 {
margin: 0;
grid-area: prjone;
}
.project-1 img {
width: 100%;
}
.project-2 {
margin: 0;
grid-area: prjtwo;
}
.project-2 img {
width: 100%;
}
.project-3 {
margin: 0;
grid-area: prjthree;
}
.project-3 img {
width: 100%;
}
.header {
grid-area: header;
display: grid;
border-bottom: 3px solid #7d97ad;
grid-template-areas:
"hdlg"
"hdtxt";
}
.large-image {
width: 100%;
margin: 0;
padding: 0;
grid-area: limg;
}
.main {
grid-gap: 20px;
grid-area: main;
display: grid;
grid-template-areas:
"ftwk"
"prjone"
"prjtwo"
"prjthree";
}
.container {
display: grid;
grid-gap: 20px;
grid-template-areas:
"header"
"limg"
"main";
}
@media screen and (min-width: 600px) {
.header {
grid-template-columns: 90px 1fr;
grid-template-areas:
"hdlg hdtxt";
}
.header-logo {
text-align: left;
}
.header-text {
text-align: right;
}
.main {
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"ftwk ftwk ftwk"
"prjone prjtwo prjthree";
}
}
@media screen and (min-width: 800px) {
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
}