Kevin Powell - Community•2d ago

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;
}
}

2 Replies

ἔρως•21h ago

this is not a #front-end question, but an #os-and-tools question but, there is remote debugging available for both android and ios, however, the answer for which tool to use depends on the os of the phone and pc

Dev_HKOP•10h ago

i'm using linux & the issue happens on ios devices

Gaming

Programming

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