[ad_1]
Replies: 4
hello,
I have this example website . I have modified some sections of it and after modifying it I got this problem on iphone 14 portrait : at the home page the first image has margin-left a deviation while I use 100%.
also I have the same problem on the banden page and contact page .
the css code is :
#top {
top:0;
width: 100%;
height: 30px;
background: white;
display: flex;
flex-direction: row;
top: 0;
left: 0;
z-index: 1002;
transition: top 0.3s;
position:absolute;
}
.number-one{
display: flex;
width: 100%;
justify-content: flex-start;
align-items: center;
text-align: center;
color: #333;
font-size: 1rem;
margin-left: 2%;
}
.number-two {
display:none;
}
.number-three {
display:none;
}
.box .sub-box {
width:100%;
margin-top:4rem;
}
.number-one i {
color:gold;
margin-top:-0.15rem;
margin-right:5px;
margin-bottom:0;
}
#flex-container {
width:100%;
}
.wrapper {
width:100%;
}
.flex-container-section1 {
width:100%;
height:40px;
background:#b79b6d;
box-sizing:border-box;
z-index:1001;
top:30px;
/*left:0; */
position:fixed;
}
.sub-flex-container-section1 {
display: flex;
flex-direction:row;
justify-content: space-between;
align-items: center;
width: 100%;
}
.logo-icon {
display: flex;
align-items: center;
width: 50%;
margin-top:2px;
}
.icon-circle {
display: flex;
justify-content: center;
align-items: center;
width: 25px;
height: 25px;
border-radius: 50%;
background-color:white;
margin-right: 10px;
}
.icon {
font-size: 12px;
font-weight:bold;
color:black !important;
}
.logo-tekst {
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-weight:500;
text-align:center;
padding-top:12px;
}
.menu-container{
display:flex;
width:20%;
justify-content:flex-end;
align-items:center;
right:0;
}
.flex-container-section2 {
position: fixed;
top:70px;
left: 0;
width: 100%;
height: 30px;
background: red !important;
z-index: 1001;
box-sizing: border-box;
}
.fixed {
top: -30px;
position:fixed;
}
.sub-flex-container-section2 {
display:flex;
flex-direction:row;
width:100%;
}
.flex-container-section2 .info-tekst1 {
width:100%;
display:flex;
justify-content:flex-start;
align-items:center;
text-align:center;
margin-left:2%;
color:#ffd978;
font-size:18px;
margin-top:0.15rem;
}
.info-tekst2 {
display:none;
visibility:hidden;
}
.info-tekst3 {
display:none;
visibility:hidden;
}
.home-page-image-container .home-border1 {
display:none;
visibility:hidden;
}
.onderhoud-page-image-container .onderhoud-border1 {
display:none;
visibility:hidden;
}
.banden-page-image-container .banden-border1 {
display:none;
visibility:hidden;
}
.apk-page-image-container .apk-border1 {
display:none;
visibility:hidden;
}
.contact-page-image-container .contact-border1 {
display:none;
visibility:hidden;
}
.bedankt-page-image-container .bedankt-border1 {
display:none;
visibility:hidden;
}
.home-page-image-container {
position: relative;
overflow:hidden;
width: 100%;
}
.home-page-image-container img {
max-width: 100%;
width:660px;
margin-top:100px;
height: auto;
max-height:350px;
display: block;
clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
}
.onderhoud-page-image-container {
position: relative;
overflow:hidden;
width: 100%;
}
.onderhoud-page-image-container img {
max-width: 100%;
width:660px;
height: auto;
max-height:350px;
display: block;
clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
margin-top:100px;
}
.banden-page-image-container {
position: relative;
width: 100%;
}
.banden-page-image-container img {
max-width: 100%;
width:660px;
height: auto;
max-height:350px;
display: block;
clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
margin-top:100px;
}
.apk-page-image-container {
position: relative;
width: 100%;
}
.apk-page-image-container img {
max-width: 100%;
width:660px;
height: auto;
max-height:350px;
display: block;
clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
margin-top:100px;
}
.contact-page-image-container {
position: relative;
width: 100%;
}
.contact-page-image-container img {
max-width: 100%;
width:660px;
height: auto;
max-height:350px;
display: block;
clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
margin-top:100px;
}
.bedankt-page-image-container {
position: relative;
width: 100%;
}
.bedankt-page-image-container img {
max-width: 100%;
width:660px;
height: auto;
max-height:350px;
display: block;
clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
margin-top:100px;
}
/*-------home-page---*/
.section-container .text {
font-size: 14px;
margin-bottom: 10px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
.section-container .moreText {
display: none;
}
.section-container .read-more-btn {
padding: 14px 40px;
margin-top:0.75rem;
background-color:#277ab0;
border-radius:20px;
color:white;
font-weight:bold;
border: none;
outline: none;
font-size: 18px;
cursor: pointer;
}
.section-container .read-more-btn:hover {
background-color:#378fcc;
color:whitesmoke;
}
/* Add these styles to show or hide text content */
.section-container .text.show-more .dots {
display: none;
}
.section-container .text.show-more .moreText {
display: inline;
}
/* Specific styles for section 1 */
.flex-container-about-page-section1 {
display: flex;
width:100%;
flex-direction:column-reverse;
margin-top:4rem;
}
.about-page-section1-right-side-custom {
width: 100% !important;
height: 250px !important;
padding:0;
margin;0;
}
.about-page-section1-right-side-custom img {
display:block !important;
box-sizing:border-box;
max-width:100% !important;
width:660px !important;
height: 100% !important;
object-fit: cover !important;
}
.about-page-section1-left-side-custom {
width:96%;
height: 350px;
margin-top:2rem;
margin:2%;
}
.about-page-section1-left-side-custom h2 {
font-size: 21px;
margin-bottom: 10px;
font-family: 'Roboto', sans-serif;
font-weight: 500;
}
/* Specific styles for section 2 */
.flex-container-about-page-section2 {
display: flex;
width: 100%;
flex-direction:column;
margin-top: 3rem;
}
.about-page-section2-left-side-custom {
width: 100%;
height: 250px;
}
.about-page-section2-left-side-custom img {
max-width: 100%;
height: 100%;
width:660px;
object-fit: cover;
}
.about-page-section2-right-side-custom {
width: 96%;
margin-left: 2%;
margin-right: 2%;
height: 350px;
margin-top:2rem;
}
.about-page-section2-right-side-custom h2 {
font-size: 21px;
margin-bottom: 10px;
}I have disabled many things but the problem is the same . this problem is only on mobile .
can some one see beter than me how this problem happens ? when I use -margin-left then problem goes away and this is can maybe cause onother problem?
thanks