I wanted my logo to be in SVG format so that I didn't have to worry about resolution and it ever being blurred.
I just put the website onto the server, open it on my iPhone, and this is what I see: https://i.stack.imgur.com/pAJST.jpg
Messed around with the CSS doing everything I could think of (I'm new to Web).
What is going on? It looks great on Chrome, however I also just checked desktop Safari and it looks blurry there too.
Here's my two files:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.css">
<link rel="stylesheet" type="text/css" href="custom.css"/>
<script defer src="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.js"></script>
</head>
<body>
<div class="ui borderless main menu fixed">
<div class="ui text container" style="max-width: 100% !important">
<div class="header item">
<img id="headerLogo" class="logo" src="images/FullLogo_test.svg">
</div>
<a href="tel:555-555-5555" class="ui right floated item" tabindex="0">
<button class="ui inverted black button">Call (555) 555-5555</button>
</a>
</div>
</div>
</body>
</html>
custom.css:
#headerLogo {
width: 200px;
}
@media only screen
and (min-device-width : 380px)
and (max-device-width : 480px) {
#headerLogo {
width: 150px;
}
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 380px) {
#headerLogo {
width: 120px;
}
}
