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 HTML Page Design - Help Needed

Discussion in 'HTML & Website Design' started by anna30, Nov 27, 2018.

0
  1. #1
    I have created a page in HTML. Here i have put 6 images in table. It is fine in Desktop version but when it is opened in Mobile, it is not showing correctly.

    Please check my page http://quizistan.in/download-app

    I want to show in mobile without horizontal scrollbar each image in one row.

    Suggest me code that can help me to make it better.
     
    anna30, Nov 27, 2018 IP
  2. kennedygitahi

    kennedygitahi Active Member

    Messages:
    32
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    61
    Articles:
    2
    #2
    I can redo the page for you in bootstrap for free if yo want. Wold be a nice challenge for me. What do you say?
     
    kennedygitahi, Nov 28, 2018 IP
  3. kennedygitahi

    kennedygitahi Active Member

    Messages:
    32
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    61
    Articles:
    2
    #3
    Here is the index.html file with bootstrap added in plus a custom.css file with some of my styles added in. Have fun https://www.dropbox.com/s/9e6jxega65j7n23/new-site.zip
     
    kennedygitahi, Nov 28, 2018 IP
  4. anna30

    anna30 Well-Known Member

    Messages:
    280
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    123
    #4
    This is not working. Please suggest.
     
    anna30, Nov 29, 2018 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    Get rid of the table. A table cannot be responsive; it's the nature of the beast.
     
    kk5st, Nov 29, 2018 IP
  6. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #6
    These images are your current problem

    [​IMG]

    There is absolutely no need for the words to be part of the image - put them in their own div and style them so they look exactly the same on desktop but sit below the image on mobile.
     
    sarahk, Nov 29, 2018 IP
  7. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    818
    Best Answers:
    7
    Trophy Points:
    320
    #7
    Why are you using TABLES for LAYOUT? Tables are for displaying TABULAR data.
     
    mmerlinn, Nov 29, 2018 IP
  8. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #8
    If you view the source you'll see there is not <table tag
     
    sarahk, Nov 29, 2018 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #9
    Without parsing the scripts, I have seen the table elements and am sure they're written by the js. Using js to write content is idiocy.

    g
     
    kk5st, Nov 29, 2018 IP
  10. anna30

    anna30 Well-Known Member

    Messages:
    280
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    123
    #10
    @kennedygitahi - I have implemented the code sent by you. But yet now it is not showing properly in Desktop and Mobile View. Please help me so that i can look fine in both - Desktop as well as in Mobile. Now, it is in DIV tag.
    http://quizistan.in/download-app
     
    anna30, Nov 29, 2018 IP
  11. volkankey

    volkankey Member

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #11
    I can do it via responsive css.

    Skype:
    volkankeyif
     
    volkankey, Dec 6, 2018 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #12
    Oh yeah, take someone who already has problems and screw them over even further. That's a GREAT plan.

    Again, only thing you can learn from bootcrap is how NOT to code a website.
     
    deathshadow, Dec 6, 2018 IP
    JEET likes this.