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.

Responsive Layouts

Discussion in 'CSS' started by Karolwf, Sep 3, 2015.

  1. #1
    I have this website with no responsive layouts.
    I think this is a total mess. Text in px and more.

    Can somebody help me rewrite CSS to responsive layouts?
    SEMrush
    Here is that website:
    http://www.furniturefinder.biz

    Thanks
     
    Karolwf, Sep 3, 2015 IP
    SEMrush
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,423
    Likes Received:
    1,379
    Best Answers:
    24
    Trophy Points:
    400
    #2
    Your current template reeks of 1997. Instead of trying re-writing it, find a nice responsive template out there (avoid anything bootstrap though) and transfer your current lists / texts / graphics into it. And you will be able to do this completely on your own.
     
    qwikad.com, Sep 3, 2015 IP
  3. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #3
    I doubt that rewriting the CSS is going to solve anything. The page is broken structurally, and mobile devices have very little tolerance for trash markup. You need to start by getting rid of the weak transitional doctype and fixing the validation errors. Then look at the layout which is really where you have to start. CSS is not going to save you if you have a stacked div structure in a rigid format. The current tag soup is just too badly damaged to be converted to a responsive format.
     
    COBOLdinosaur, Sep 3, 2015 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #4
    Yeah, this isn't just about rewriting the CSS. Responsive layout is (or at least should be) the last in a long string of steps in accessible design. That's design as in engineering, user interaction and accessibility, not as in "ooh looksies I cans drawz pretties pikturz".

    Semantic markup is the first step -- using HTML to say what things ARE and NOT what you want them to look like. You don't have that. Without that first simple step implementing any of the other steps along the way like separation of presentation from content, graceful degradation, semi-fluid elastic design are impossible, meaning tacking responsive on it is an uphill fight at best, an exercise in futility at worst.

    I mean you have a form without fieldsets wrapping the fields, you have fieldsets + legends around non-form elements, attributes like BORDER and TARGET that have no business on any website written after 1997, endless pointless DIV, ID and classes for nothing, clearing DIV like it's still 2001, static style inlined in the markup, no MEDIA targets on the external stylesheets, endless pointless scripttardery for **** knows what (looks like a broken attempt at lightbox), pointless redundant TITLE attributes, multiple anchors doing the job of one, paragraphs around things that are not grammatical paragraphs...

    At 13.3k of markup that might seem lightweight, but given there's only six content images and 1.33k of plaintext that's still two to three times what should have been used to build such a page.

    I see no telltales of what it's running under the hood server-side for a commerce system? Without knowing what it's running under the hood it's hard to say how hard or easy changing it would be.

    Though... damn, is that CRELoaded? If so I have a sneaking suspicion just which snake oil peddler built that site. It has all the hallmarks of his sleazy practices and outright ignorance of accessibility, usability much less the technologies on which websites are built. I could be wrong, but I see certain fingerprints in there...
     
    deathshadow, Sep 7, 2015 IP
  5. Karolwf

    Karolwf Active Member

    Messages:
    111
    Likes Received:
    23
    Best Answers:
    1
    Trophy Points:
    70
    #5
    This is a template for Price Tapestry script. I've bought this template a few years ago from guy from UK.
    Now I'm looking for new templates. But everything is made with bootstrap. And everything is a really crap.

    I started to change this template here:
    http://www.furniturefinder.biz/store/
    Removed a few things, changed CSS -and Google mobile checker says: This site is mobile friendly.
    Of course is not.

    If you can take a further look - I can create FTP connection for you.

    Thans.
     
    Karolwf, Sep 7, 2015 IP
  6. freelance varma

    freelance varma Greenhorn

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #6
    Hi,

    when you are ok with the current template try to develop you css in '%' not in 'Px', use @media CSS, not bootstrap, so that you can easily build up your site with responsive

    Thanks
     
    freelance varma, Sep 9, 2015 IP
  7. somnathji

    somnathji Member

    Messages:
    50
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #7
    Responsive layouts possible in two ways:-
    A responsive layout in single CSS page you can create 320p 640p 1080p resolution CSS with necessary javascript.
    Another Option is bootstrap layouts like bootstrap 2.5 3.0 4.0
    there are classes you can use them and linked on CSS and javascript jQuery implement on websites
     
    somnathji, Oct 7, 2015 IP
  8. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #8
    I wish there was a way to downvote idiotic answers - because this is one of them.
    No, you don't use javascript todiffer between different CSS-files, and no, you don't need Bootstrap or jQuery or any other javascript to choose between different CSS-files.
    This is what we have @media-queries INSIDE CSS-files for. No need for javascript to make responsive layouts, no need for bloated frameworks, and with proper coding, there's almost NO need for even @media-queries, apart from some minor adjustments.
     
    PoPSiCLe, Oct 7, 2015 IP
    COBOLdinosaur and ryan_uk like this.
  9. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #9
    What planet are you from somnathji? Planet dumbass perhaps? Best practice is to use the simple methods instead of making a bad situation worse by adding more bloated crap. I suggest you find some tutorials on the basics of web development instead of making a fool of yourself with nonsense postings.
     
    COBOLdinosaur, Oct 7, 2015 IP