1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to stop shrinking mobile web and start scaling instead?

Discussion in 'HTML & Website Design' started by vybrano, Dec 21, 2019.

  1. #1
    I have standard PC web + mobile web. Using:

    <meta name=viewport content="width=device-width, initial-scale=1">
    @media (min-width: 1023px) { }
    @media (max-width: 1022px) { }


    But this website contains object that is 480px wide. So once the shrinking mobile web reaches 480px and under I would like to lock shrinking. And start scaling the screen instead. So the 480px website is 100% of the screen without overflowing even on the smaller devices.
    SEMrush
    How to do it?
     
    vybrano, Dec 21, 2019 IP
    SEMrush
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    467
    Likes Received:
    40
    Best Answers:
    21
    Trophy Points:
    130
    #2
    Hi vybrano.
    Are you talking about about following CSS style:
    element{
         min-width: 480px;
    }
    Code (CSS):
     
    hdewantara, Dec 21, 2019 IP
  3. vybrano

    vybrano Greenhorn

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #3
    That will set minimal width of the web to 480px. Which is good.

    But now I have to tell the mobile browser to start un-zooming itself. Since on 320px mobile - 480px web would overflow out of screen.
     
    vybrano, Dec 22, 2019 IP
  4. hdewantara

    hdewantara Well-Known Member

    Messages:
    467
    Likes Received:
    40
    Best Answers:
    21
    Trophy Points:
    130
    #4
    Umm, I don't have any ideas to do that.
    But perhaps allowing it to overflow is better than scaling whole screen down
    as the latter may disable users to read tiny texts?
     
    hdewantara, Dec 22, 2019 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,171
    Likes Received:
    1,725
    Best Answers:
    239
    Trophy Points:
    515
    #5
    1) if you're thinking in pixels, PARTICULARLY for your media queries, you're not thinking. If you're using proper dynamic/elastic design your media queries are broken... and if you're not using dynamic/elastic design (aka working in EM) you're flipping the bird at usability and accessibility.

    2) If you're writing media queries for BOTH directions, you're also not doing anything right. Write it for one of the other first (I prefer desktop first for various reasons, considering "mobile first" to be feeble-minded) and then override the style with CSS as you shrink the page when/where needed.

    That you're even THINKING of something in terms of it being 480px is broken/flawed/nonsensical.

    Though if one were crapping on the Internet with something at 480px, and you want it to shrink below that, that's max-width's job.

    
    width:100%;
    max-width:480px;
    
    Code (markup):
    Max width overrides width, so what happens is it's 480px unless the parent container is smaller than that, in which case the element will size to the parent container.

    But unless that's a raster image, you shouldn't even be using or thinking in PX in the first place, you should be using EM so it's dynamic/elastic for users with accessibility needs.
     
    deathshadow, Dec 22, 2019 IP
  6. vybrano

    vybrano Greenhorn

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #6
    It's a 480px wide ad unit that I can't change, like and Adsense ad unit, but not responsive. And I have to work around that. And somehow display that on PC + mobile version.
     
    vybrano, Dec 22, 2019 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,171
    Likes Received:
    1,725
    Best Answers:
    239
    Trophy Points:
    515
    #7
    Well, then you might be right and properly screwed... I'd consider hiding it at that point.

    Most advertisers have multiple size adverts you can choose from. Some -- like adsense -- even include code to automatically pick one based on the width of the container it's in. Doesn't resize with the window, but it would at least fit on page load.

    Do you have ANY option for other advertisements to use? If so, use a script to set up or pick the correct one for the size.
     
    deathshadow, Dec 23, 2019 IP