3 replies

How to debug css for different mobile browsers (iphone/android)

so i deployed my website & one thing that i saw was how different an element was painted in iphone devices vs android & web

the first two images are on an iphone (first in safari & the second on chrome)
meanwhile the last two were taken from an android phone (one on chrome & the other on brave)

here's the css of the element
the thing is there's no way to debug the css on a phone like how can i do that, i tried the device mode & still doesn't reproduce the issue

.our-services-section>div {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 1rem;
    width: 75%;
    margin: 0 auto;
}
.our-services-section>div>div:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    line-height: 1;
    align-items: self-end;
}
@media screen and (max-width: 1280px){
.our-services-section>div {
    grid-template-columns: 1fr;
    width: clamp(min(calc(100% * 10/12),430px),47vw,80vw);
}
.our-services-section>div>div:nth-of-type(2n) {
    position: relative;
    left: 2rem;
}
}

.our-services-section>div {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 1rem;
    width: 75%;
    margin: 0 auto;
}
.our-services-section>div>div:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    line-height: 1;
    align-items: self-end;
}
@media screen and (max-width: 1280px){
.our-services-section>div {
    grid-template-columns: 1fr;
    width: clamp(min(calc(100% * 10/12),430px),47vw,80vw);
}
.our-services-section>div>div:nth-of-type(2n) {
    position: relative;
    left: 2rem;
}
}

.our-services-section>div {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 1rem;
    width: 75%;
    margin: 0 auto;
}
.our-services-section>div>div:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    line-height: 1;
    align-items: self-end;
}
@media screen and (max-width: 1280px){
.our-services-section>div {
    grid-template-columns: 1fr;
    width: clamp(min(calc(100% * 10/12),430px),47vw,80vw);
}
.our-services-section>div>div:nth-of-type(2n) {
    position: relative;
    left: 2rem;
}
}

.our-services-section>div {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 1rem;
    width: 75%;
    margin: 0 auto;
}
.our-services-section>div>div:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    line-height: 1;
    align-items: self-end;
}
@media screen and (max-width: 1280px){
.our-services-section>div {
    grid-template-columns: 1fr;
    width: clamp(min(calc(100% * 10/12),430px),47vw,80vw);
}
.our-services-section>div>div:nth-of-type(2n) {
    position: relative;
    left: 2rem;
}
}

How to debug css for different mobile browsers (iphone/android)

Similar Threads

Similar Threads

Similar Threads