'Image stretching when translated to mobile but is working correctly in VS Code
I'm currently designing an app for a school project and have had some issues with my mobile footer.
I have an icon for a button that is stretching over the entire footer on my actual phone and cannot seem to figure out why it's being translated this way.
I am testing on the actual phone screen size in VS Code and have flex elements applied. I have messed with the widths and heights (taken them off as well) and can't seem to get this icon to display correctly in my Chrome browser on my iPhone (we have tried several other phones as well and all have the same results).
html {
@include mixin.flex_styles_cl();
height: 100%;
width:100%;
font-family: fonts.$main-font;
overflow-x: hidden;
overflow-y: hidden;
padding:0%;
body {
@include mixin.flex_styles_cl();
height: 100%;
width: 100%;
padding: 0%;
margin: 0%;
justify-content: center;
overflow-y: hidden;
overflow-x: hidden;
header {
@include mixin.flex_styles_rw();
@include mixin.header_footer_styles();
#space {
display: flex;
width: 33%;
}
#header-logo-container {
display: flex;
flex-direction: row;
justify-content: center;
width: 33%;
height: 100%;
#header-logo {}
}
#hamburger {
display: flex;
justify-content: right;
width: 33.3%;
height: 100%;
// border: solid 1px red;
#ham-menu:hover {
@include mixin.hover-styles();
}
#ham-menu {
display: flex;
height: 100%;
}
}
}
#content {
display: flex;
flex-direction: column;
justify-content: center;
background-color: rgb(255, 255, 255);
height: 80%;
width: 100%;
.row-container {
display: flex;
flex-direction: row;
justify-content: center;
height: 50%;
#main-logo {
display: flex;
margin-top: 5%;
height: auto;
width: 25%;
object-fit: contain;
}
}
#welcome-txt {
display: flex;
flex-direction: column;
justify-content: center;
height: 20%;
width: 100%;
#name {
display: flex;
justify-content: center;
height: 75%;
#centre-name {
display: flex;
flex-direction: column;
p {
display: flex;
font-size: 5vh;
}
}
}
#centre-txt {
display: flex;
flex-direction: row;
justify-content: center;
height: 25%;
#message {
display: flex;
text-align: center;
font-size: 1.5vh;
}
}
}
#signup-login {
display: flex;
flex-direction: column;
justify-content: center;
height: 30%;
width: 100%;
#form-align {
display: flex;
flex-direction: row;
justify-content: center;
height: 80%;
width: 100%;
#form {
display: flex;
height: 100%;
width: 80%;
@include mixin.rounded-border();
#button-columns {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
.button-container {
display: flex;
justify-content: center;
width: 100%;
height: 25%;
margin: 1%;
.main-button:hover {
@include mixin.hover-styles();
}
.main-button:focus {
transform: scale(1.1);
transition: .1s;
background-color: colors.$main-color;
}
.main-button {
border-radius: 40px;
padding-right: 10%;
padding-left: 10%;
color: black;
background-color: colors.$main-color;
font-family: fonts.$main-font;
font-size: 1vh;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border: none;
font-weight: bold;
}
}
}
}
}
}
}
footer {
@include mixin.header_footer_styles();
display: flex;
flex-direction: row;
width: 100%;
#navigation-buttons {
display: flex;
width: 100%;
height: 100%;
text-decoration: none;
.nav-buttons:active {
transform: scale(.9);
transition: .1s;
background-color: colors.$main-color;
}
.nav-buttons:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.9);
transition: 0.3s;
}
.nav-buttons {
display: flex;
flex-direction: column;
width: 25%;
height: 100%;
justify-content: center;
.hover-button {
display: flex;
flex-direction: column;
height: 70%;
width: 100%;
.button-img {
display: flex;
justify-content: center;
}
.button-title {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
width: 100%;
height: 25%;
p {
display: flex;
justify-content: center;
text-align: center;
width: 100%;
height: 100%;
font-family: "jost-variable";
font-size: 1.25vh;
}
}
}
}
}
}
}
}
```
<HTML>
<head>
<title></title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<!--Sets the width of the page is the devices widtth-->
<link rel="stylesheet" href="./styles/main.css" />
<script src="./scripts/jquery-3.6.0.min.js"></script>
<script src="./scripts/index.js"></script>
</head>
<body>
<!--Header-->
<header>
<div id="space"></div>
<div id="header-logo-container">
<img id="header-logo" src="./images/Untitled design (7).png" />
</div>
<div id="hamburger">
<!-- <img id="ham-menu" src="./images/hamburger-menu.png" /> -->
</div>
</header>
<!--Navigation-->
<nav></nav>
<!--Main-->
<main id="content">
<div class="row-container">
<img id="main-logo" src="./images/logo/cropped-logo.png" />
</div>
<div id="welcome-txt">
<div id="name">
<div id="centre-name">
<p>Fuel Line</p>
</div>
</div>
<div id="centre-txt">
<p id="message">
We get you where you need to go for
<span style="color: orange"> less</span>
</p>
</div>
</div>
<div id="signup-login">
<div id="form-align">
<div id="form">
<div id="button-columns">
<div class="button-container">
<button
class="main-button"
onclick="window.location.href='/login'"
>
Login
</button>
</div>
<div class="button-container">
<button
class="main-button"
id="signup"
onclick="window.location.href='/map'"
>
Signup
</button>
</div>
</div>
</div>
</div>
</div>
</main>
<!--Footer-->
<footer>
<div id="navigation-buttons">
<!--Home Button-->
<div class="nav-buttons">
<div class="hover-button" id="home-button">
<div class="button-img">
<img src="./images/buttons/house-logo.png" />
</div>
<div class="button-title">
<p>Home</p>
</div>
</div>
</div>
<!--Favorites Button-->
<div class="nav-buttons">
<div class="hover-button">
<div class="button-img">
<!-- <img src="./images/buttons/favorites-button.png" /> --
>
</div>
<div class="button-title">
<p>Favorites</p>
</div>
</div>
</div>
<!--User Button-->
<div class="nav-buttons"
onclick="window.location.href='/profile'">
<div class="hover-button">
<div class="button-img">
<!-- <img src="./images/buttons/user-button.png" /> -->
</div>
<div class="button-title">
<p>Your Profile</p>
</div>
</div>
</div>
<!--Gas Button-->
<div class="nav-buttons" >
<div class="hover-button">
<div class="button-img">
<!-- <img src="./images/buttons/gas-button-alt.png" /> -->
</div>
<div class="button-title">
<p>find Gas</p>
</div>
</div>
</div>
</div>
</footer>
<!--END OF BODY-->
</body>
</html>
How the picture looks testing on VS Code sized to phone size:
How it appears on an actual iPhone Chrome browser:
iPhone phone view with pesticide on to see here containers are placed:
Solution 1:[1]
Please show the code also to better understand the issue, looking at the image we cant figure out the issue, but still it seems like either the icon is streching because any property not supported by browser or wrong height or width in mobile view.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Sameer |