Mobile layout for high-resolution screens

  • johnynla

    (@johnynla)


    6 years, 3 months ago

    Hi,
    At whole site I have a such code for a site width:
    .site-content { width: 90%; }
    Which on mobile devices leads to make a 10% gap-margin at left side of whole site content which looks crookedly. So to remove this gap-margin I want to set for a mobile (vertically oriented smartphones screens most of all) { width: 100%; } but can’t implement it, it does not work, seems because now many smartphones as my too have a screens with many pixels FHD/QHD.
    Maybe there are another way to detect “smartphone browser” to set { width: 100%; } ?

Viewing 2 replies - 1 through 2 (of 2 total)
  • mzaheerdad

    (@zaheerdad)

    6 years, 3 months ago

    Hi,

    You can define css for different screen size,

    @media only screen and (max-device-width : 640px) {
.site-content { width: 100%; }
}

@media only screen and (max-device-width: 768px) {
.site-content { width: 95%; }
}
    Thread Starter johnynla

    (@johnynla)

    6 years, 3 months ago

    Try to read before write.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Mobile layout for high-resolution screens’ is closed to new replies.

Tags