2 Replies - 857 Views - Last Post: 03 June 2020 - 11:53 PM

#1 chris98   User is offline

  • D.I.C Lover

Reputation: 41
  • View blog
  • Posts: 1,118
  • Joined: 06-July 13

Help with scaling mobile site

Posted 04 May 2020 - 04:25 AM

I'm trying to make my website more mobile friendly. It works very well on a desktop but everything is stated in pixels, so I'm not really sure how to proceed.

My instinct is to use media queries and dynamically set the width for different devices in pixels still, but because my CSS knowledge is so atrocious I genuinely have no idea what sizes different screens are. I've also learned that a CSS pixel is not the same as a pixel on my computer, so from what I can tell it just appears to be total guesswork at the moment. I could try using percentages, but for some reason my site doesn't seem to like using percentages and I think it would be even more complicated anyway.

I've developed a few media queries that do kind of work, not properly, but they do exactly what they say on the tin. The main problem I'm having is that I just don't know the pixels of different devices (starting with my laptop) so I can start scaling things.

This is what I have so far, but it's all guess-work really. Some of it is way out. Note that the actual size of wrapper_inner is 980 pixels. Any help would be greatly appreciated.

@media screen and (max-width: 1080px) { 
    #wrapper_inner {
        width: 880px;
    }

    .side_bar {
        display: none;
    }

    #content_wrapper {
        width: 880px;
    }

    .content {
        width: 880px;
    }
}

@media screen and (max-width: 800px) {
    #wrapper_inner {
        width: 700px;
    }

    .side_bar {
        display: none;
    }
}

@media screen and (max-width: 640px) {
    #wrapper_inner {
        width: 540px;
    }

    .side_bar {
        display: none;
    }
}


Is This A Good Question/Topic? 0
  • +

Replies To: Help with scaling mobile site

#2 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6901
  • View blog
  • Posts: 28,559
  • Joined: 12-December 12

Re: Help with scaling mobile site

Posted 04 May 2020 - 05:21 AM

Yes, using just fixed pixel widths won't work alone.

You might start your journey here

Responsive Web Design Basics

and search further on "responsive web design".

A search of "css relative units" (example) will also prove fruitful.

Quote

My instinct is ... my CSS knowledge is so atrocious I genuinely have no idea what sizes different screens are. ... total guesswork at the moment.

This is why you need spend time reading into the subject.
Was This Post Helpful? 0
  • +
  • -

#3 danchy22   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 27-April 20

Re: Help with scaling mobile site

Posted 03 June 2020 - 11:53 PM

you would need to use "vw" (viewpoint width) and "vh"(viewpoint height) and add your viewpoint meta into your header. there are a vew units you can use for responsive websites

as regards to knowledge, maybe read into what your doing and learn, i take courses mainly, dont take long as css is quite simple.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1