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 style margins based on screen size?

Discussion in 'CSS' started by cma6, Jun 30, 2016.

  1. #1
    My website was originally designed for a 20" (4:3 aspect ratio) desktop monitor. However in 2016, I believe--correct me if I'm wrong--that a much wider screen is typical, e.g., 21" (16:9 aspect ratio) is more common. As a result, several "template" pages on the site need to have the style sheet adjusted.
    For example, look at the category page on a wide monitor:
    https://www.vintagetextile.com/1920s_to_1930s.htm

    How can I update the style sheet so that styles are unchanged for a 20" (4:3) monitor. However, on a wide-screen monitor, although columns 1 & 2 would remain fixed; column 3 would be made narrower by increasing the right and left horizontal margins of the page?
    Thanks in advance to the CSS experts at Digitalpoint, who have helped me in the past.

    Here is the current style sheet:

    body{background-color:#fff; font:medium Verdana,Tahoma,Helvetica,sans-serif;}
    *, *:before, *:after { -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;}
    .outer {width:90%;
    margin:0 auto;}
    h1 {color:#fff;
    background-color:#535353;
    font:1.55em "Bookman Old Style";
    padding:0.2em 22px 0.35em;
    margin-bottom:0.5em;}
    h2 {color:#000;
    background-color:#fff;
    font:bold 1.125em Verdana,Tahoma,Helvetica,sans-serif;
    padding:0 16px;}
    .logo { text-align:center;
    margin-bottom:20px; }
    .logo img { max-width:100%;
    height:auto;
    border:0 none;}
    .item {overflow:hidden;}
    .item > div {
    display:table-cell;
    vertical-align:middle;
    padding:0;}
    .item .imagebox { padding-right:20px;}
    .item:nth-child(odd) .descript { padding-left:209px;}
    .item img
    {display:inline-block;
    width:209px;
    height:325px;
    vertical-align:top;
    text-align:center;
    border:0 none;}
    .item:nth-child(even) {margin-left:209px;}
    .item:nth-child(odd) {background-color:#e5e5e5;}
    .item p {font-size:1em;
    line-height:1.375;
    margin:.5em 20px .75em 0; }
    .pid {margin-top:.75em;}
    .pid b { display:inline-block;
    vertical-align:top;
    font-weight:bold;
    margin:.25em 24px; }
    .pid b:first-child {
    margin-left:0; }
    .pid .remark {color:#f00;}
    @media only screen and (max-width:900px)
    { .item:nth-child(even) {margin-left:0px;}
    .item:nth-child(odd) .descript {padding-left:0;}
    .item + .item {margin-top:6px;}
    .item p {font-size:.9375em;}}
    @media only screen and (max-width:700px)
    {.item .imagebox {float:left;}
    .item .descript {display:block;}
    .item p {font-size:.9375em; margin-left:20px;}
    h1 {text-align:center;}}
    @media only screen and (max-width:520px)
    {.outer {width:auto;}
    .item .imagebox {
    display:block;
    float:none;
    text-align:center;
    padding-right:0; }
    .pid { text-align:center;
    margin-left:-12px;
    margin-right:-12px; }
    .item p {margin:.25em 12px .75em;}
    .pid b:first-child {margin-left:24px;}}
     
    Solved! View solution.
    Last edited: Jun 30, 2016
    cma6, Jun 30, 2016 IP
  2. tomasz86

    tomasz86 Greenhorn

    Messages:
    24
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    18
    #2
    The truth is that in 2016 there is no typical screen resolution or aspect ratio. People are browsing the Web using a wide variety of screens, starting from tiny 2" smartwatches (sometimes with a round screen) to large 30" monitors (often with high dpi displays). You will be limiting yourself greatly if you choose to support only a small fraction of them.

    However, if you do decide to adjust your site only for a specific type of screen then you should probably look at your website data and see what your visitors are using because it can be very different from what the general statistics show.
     
    tomasz86, Jun 30, 2016 IP
  3. cma6

    cma6 Member

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #3
    Peon:
    Thanks most kindly for the good advice. I have taken a look at my web stats, which give user agent (O/S), not screen size, but one can deduce some information from user agent. What I was hoping to do was a limited tweak to my CSS styles to accommodate higher aspect ratios. As you can see from the style sheet, I already use "@media" and "max-width" to target tablets and phones. I was hoping, but did not know, that there might be a CSS style that would allow detection and styling by aspect ratio, so that if it were greater than 1.6, only then would a new rule (affecting margins) go into effect.
     
    cma6, Jul 1, 2016 IP
  4. #4
    I think what you are looking for is max-width. Simply put when screens get larger than a certain size some layout techniques fall apart -- you also have the accessibiltiy worry that paragraphs can get so wide they become hard to follow. Rather than thinking about increasing your margins you should be asking "where does this layout break and/or get hard to follow" and say "max-width:48em" (or however many EM is appropriate) on whatever wrapper is around all your content. (in your case that would be .outer)

    That said, you've got a LOT of non-semantic markup that should really be cleaned up... like the H1 that's not unified across pages, presentational images (like the logo) in the markup, blocking text in the h2, overstuffed keywords meta designed to get you slapped down or ignored by search, endless pointless DIV for nothing, etc, etc... Much less the bizzaroland duplicate content in the menu?!?

    Also, the elements are riding up and indenting as you've got no float clearing or float wrapping. Try setting overflow:hidden (and zoom:1 if you care about IE6/earlier) on .item to clear up that problem... oh wait, you're saying three columns... are you TRYING to make it look like a confusing mess / rendering error at higher resolutions?
     
    deathshadow, Jul 2, 2016 IP
  5. Amator

    Amator Well-Known Member

    Messages:
    1,424
    Likes Received:
    55
    Best Answers:
    0
    Trophy Points:
    165
    #5
    the best is to work in percentages and work with max-width to avoid that it will not look OK anymore on biger resolutions
     
    Amator, Jul 9, 2016 IP
  6. cma6

    cma6 Member

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #6
    Deathshadow and Amator,
    Thanks for the "max-width" suggestion, which worked well. Much appreciated.
    Deathshadow's trenchant comments on my html and css need to be attended to.

    One other small fix on this page: https://www.vintagetextile.com/treasure_hunt.htm

    I want to give bigger margins for the text at the top:
    <p class="lg1">This section of Vintage Textile is for clients looking for that special &ldquo;find&rdquo; that does not fit into one of my major categories. Here is where the vintage clothing collector with an eye for value will discover the hidden treasure that makes the chase so enjoyable. Happy hunting! All items in the Treasure Hunt are sold &quot;as is&quot; and all sales are final!</p>

    body{width:94%;margin:0% 3% 0 3%;padding:0;border:0;color:#000;background-color:#fff;font:medium "Times New Roman",Times,serif;}
    #tbl{width:726px;border:0;table-layout:fixed;position:relative;margin-left:auto;margin-right:auto;}
    #tbl #col1,#tbl #col2,#tbl #col3{width:202px;}
    .rt{padding-right:40px}
    .bot td{padding-bottom:1.5em;}
    .bi{font-weight:bold;font-style:italic;}
    .lg{font-size:large;text-align:center;}
    .lg1{font-size:large;text-align:center;}

    I tried giving .lg1 margins or padding but that did not work.
     
    cma6, Aug 4, 2016 IP
  7. cma6

    cma6 Member

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #7
    "overstuffed keywords meta designed to get you slapped down or ignored by search"
    Can you give a recommendation on the maximum number per page?
     
    cma6, Aug 5, 2016 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    It's called keyWORDS... not keysentences, not keyphrases, but keyWORDS. It should be seven or eight single words (or proper names) that exist between <body> and </body> as CDATA. (aka text), preferably less than 96 characters in length, that you would like a SLIGHT upranking on. That's it, that's what it's FOR.

    That's why THIS:

    content="1920s flapper,1920s dresses,Titanic clothing,tea dress,nightgown,1920s dresses,Chanel,Vionnet,embroidered velvet,Fortuny,Boue Soeurs,Callot Soeurs,Paquin,Poiret,Patou,Poiret,Lelong,Lanvin,Gallenga"

    Is overstuffed. That's more than 8 words, you have multiple words between the comma's that are NOT proper names (the only exception to the single word rule), and it's 196 bytes in length... WORSE, Titanic, nightgown, chanel, vionnet, boue soeurs, callot souers and lelong do not even appear on the page.

    You go past a certain character length, use more than 7 comma's / 8 terms, you include words that are nowhere on the page, you put multiple words that are not proper names between the comma's, it is either going to be ignored, or result in search slapping you down for abuse.

    Laughably, you stick under those limits even Google will use it despite their claims to the contrary! I think they've forgotten their own rules and restrictions on how it works... They USED to even have a page that said that, but now all you can find of it is some telltales on older legit SEO sites like seoworkers.
     
    deathshadow, Aug 12, 2016 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #9
    Re: keywords
    Remember, that these are words you expect to be used by the searcher. They should be words that are actually in your text. For example, many years ago I wrote an article on enclosing float elements. It ranked well, #5 as I recall. When I began poring over the logs, I found the Google referrals had the search keyword "containing" more often than "enclosing". Those are keywords. I changed the paper's h1 element to read "Containing float elements" and moved to #1 on the results page. Once Google et al index you, check your logs to determine which search terms are actually used by the public, and make sure you use their vocabulary to aid their search.

    It is a Good Idea to sort your text to determine what words you actually use. It's a simple thing to do: Open the url in your editor's text browser. Save the page (not the source) as a text file. In your CLI (I use Xterm and BASH. If you're using a legacy OS, DOS should have equivalent functions) run the following command
    cat <keyword filename> | xargs -n1 | sort | uniq -ic > keyword-count
    Code (markup):
    That will give you a list (in the file, "keyword-count") of unique words and how many times each appears in your page.

    gary
     
    Last edited: Aug 13, 2016
    kk5st, Aug 13, 2016 IP
  10. Shahidul Islam

    Shahidul Islam Active Member

    Messages:
    42
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    68
    #10
    You can use css3 media queries to get margin
     
    Shahidul Islam, Aug 14, 2016 IP