I use media queries to make my website responsive on mobile devices. When resizing the window in google chromes mobile view or when i open the website on android devices everything looks as expected. However, when opening the website on Safari/Chrome on an iOS device, elements are misplaced and the font is also the default font and not my specified font.
I tried to adapt the viewport but that did not change anything. I read that iOS has problems recognizing the viewport, is that true? If yes, can anyone help fixing that, since i haven’t found a working solution online. Many thanks in advance!
This is my code:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/style.css">
...
</head>
and the media queries:
@media only screen and (max-width: 600px) {
body {
background-size: cover; /* Ensure the background covers the entire body */
padding: 10px; /* Adjust padding for better spacing on small screens */
}
.wrapper {
max-width: 100%;
}
p {
padding: 0; /* Remove padding for paragraphs on small screens */
}
p:tiny,
p:medium {
padding-right: 10px;
padding-left: 10px;
}
#tag-container,
.tag {
margin: 5px 2px; /* Adjust margins for tags on small screens */
}
.modal-container {
padding: 10px; /* Adjust padding for modals on small screens */
}
.card {
max-width: 100%; /* Make sure cards take up full width on small screens */
}
}
