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.

CSS help for awkward responsive layout

Discussion in 'HTML & Website Design' started by yetta, Mar 29, 2017.

  1. #1
    Hi everyone,

    This is my first post on the forums. I need advice for a site I'm working on, I'm still a noobie and this is my first client. I've been struggling with this layout for a few weeks, practically rewrote the site numerous times and can't get the elements to play well with one another.

    The site needs to be responsive and I can't make changes to the layout as the client is very specific with the way it must look. I've spoken to the client about issues with the layout, but they insist I keep trying until I get it to work.

    I believe the layout is do-able, it may just be my own lack of knowledge and skills which is causing issues. Could any of you industry veterans please help me?

    Here is an image of the layout:
    SEMrush
    [​IMG]
     
    yetta, Mar 29, 2017 IP
    SEMrush
  2. yetta

    yetta Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #2
    Site in the browser as is.
    [​IMG]
     
    yetta, Mar 29, 2017 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    724
    Best Answers:
    152
    Trophy Points:
    470
    #3
    And how, exactly, is this supposed to change to fit smaller screens? Which elements can be condensed / moved? If there isn't room on the page, there isn't room on the page. You can't change that. So SOMETHING needs to be allowed to change - it is not possible to have everything available on smaller screen sizes, at least not while looking like that.
     
    PoPSiCLe, Mar 29, 2017 IP
  4. yetta

    yetta Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    I realized that quite quickly on after the first two versions. The header and the sidenav are the biggest culprits. The logos on the sides has margins, the spinning center logo has another image underneath, so trying to make it responsive is a nightmare, even when hiding/collapsing elements on smaller devices. The sidenav also poses issues, even when changing it with media queries. All css is written from scratch in the image posted. Same issues with frameworks I've tried, bootstrap 3+4 alpha, Pure CSS, W3.css. It's easier just to build from scratch. I think i'll have to sit down with the client again and walk him through the coding issues.
     
    yetta, Mar 29, 2017 IP