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.

Issues with my site done with boostrap - Responsive website

Discussion in 'HTML & Website Design' started by imza86, Jan 3, 2017.

  1. #1
    Hi guys, so there is a few questions i would like to ask.

    So this is my site http://www.noor-azmi.com/saj2/
    SEMrush
    1) I am using default bootstrap navbar , i just change its colour to red. How do i change my navbar design to like this https://calhounsuperstructure.com/agricultural/ ? As you can see their nav bar has bigger height and the logo is in there too ? How do they make it that their logo height is more than the nav bar ?

    2) My banner image does not seems to be responsive ? There is a difference my banner with this site http://www.washington.edu/

    3)When i view my site in mobile, it looks like this. http://www.noor-azmi.com/saj2/saj-error.png Not sure why the banner width still extend to its fullest. The banner width should only be till end of nav bar.

    Your kind help will be greatly appreciated. Thanks
     
    imza86, Jan 3, 2017 IP
    SEMrush
  2. sourabhkejriwal

    sourabhkejriwal Member

    Messages:
    85
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #2
    Hi
    1) calhounsuperstructure.com/agricultural: the logo have a background color whose position is absolute and its height and width is defined.
    2)you can use css media queries to change size of logo according to width of the screen.
     
    sourabhkejriwal, Jan 8, 2017 IP
  3. mmerlinn

    mmerlinn Notable Member

    Messages:
    2,419
    Likes Received:
    354
    Best Answers:
    6
    Trophy Points:
    290
    #3
    Just copy the appropriate css code from those two sites into your css container and you will be good to go.
     
    mmerlinn, Jan 8, 2017 IP
  4. Afrojaalam.seo

    Afrojaalam.seo Greenhorn

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #4
    You may design your site with bootstrap3 for responsive to mobile device and ensure add the meta tag inside the head section.
    This is the meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">
    better, you try to visit bootstrap site for your all problems.
     
    Afrojaalam.seo, Jan 10, 2017 IP
  5. Balamurugan D

    Balamurugan D Member

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #5
    Hi,
    You can achieve responsiveness of website in many ways. Instead of using the frameworks or media queries, you can scale any html website with this css script. Just include this css,

    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

    and start using this css as,

    <div class=”row”>
    <div class=”col-2″> ………….</div>
    <div class=”col-8″> ………….</div>
    <div class=”col-2″> ………….</div>
    </div>

    The important thing to consider in this is, each row should contain the 12 columns and include your elements appropriately. We have used this technique for our website "http://www.creativewebgraphic.com".

    Try with this script, it will work as your requirement.
     
    Balamurugan D, Feb 1, 2017 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #6
    Calling that crap responsive is a laugh. The same is your site. It's not responsive in the true sense, and using what you're suggesting is pure an utter crap when it comes to proper, semantic HTML.
     
    PoPSiCLe, Feb 1, 2017 IP
    malky66 likes this.
  7. malky66

    malky66 Acclaimed Member

    Messages:
    3,661
    Likes Received:
    2,071
    Best Answers:
    84
    Trophy Points:
    515
    #7
    If that site is a showcase of your web design skills you need to give up and do something else, you have no design skills whatsoever, it's probably one of the worst looking pieces of crap I have seen in a long time.
     
    malky66, Feb 2, 2017 IP
  8. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #8
    Well, don't be too harsh. He might have made that site... I dunno. 10 years ago?
     
    PoPSiCLe, Feb 2, 2017 IP
  9. Balamurugan D

    Balamurugan D Member

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #9
    Hi guys,
    I have provided you the solution to achieve the responsiveness in easy way. if you are not interested to follow this solution, please look for the best solution for your question. I am not forcing you to see the crap website and follow me. Thanks for your comments.
     
    Last edited: Feb 2, 2017
    Balamurugan D, Feb 2, 2017 IP
  10. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #10
    No. You have provided a broken "solution" that will involve a rewrite of both the HTML and the CSS. Instead of doing it properly, with semantic HTML and a few @media-rules in the CSS-file.

    Your solution pisses on semantic HTML, abuses DIV-containers, and provide nothing useful at all. Hence the belittleing and ridicule. It's well deserved.
     
    PoPSiCLe, Feb 2, 2017 IP
  11. Balamurugan D

    Balamurugan D Member

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #11
    I agree that you are an expert in bootstrap. I recommend him to follow your solution. Bye
     
    Last edited: Feb 2, 2017
    Balamurugan D, Feb 2, 2017 IP
  12. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #12
    Bootstrap is never ever a solution to anything, if you care about semantic HTML and proper use of both HTML and CSS. Bootstrap have a tendency to add about 30-60KB to every site, not counting the actual embedded Bootcrap-files, just to be able to do things that shouldn't be needed to begin with. Please don't recommend Bootstrap, or their broken solutions.
     
    PoPSiCLe, Feb 2, 2017 IP
  13. imza86

    imza86 Member

    Messages:
    50
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #13
    Well that site is still under development. LOL. It is not yet the finished product. We are all here to learn from each other, so i think you should stop being a crap human being.
     
    imza86, Feb 3, 2017 IP
  14. kk5st

    kk5st Prominent Member

    Messages:
    3,484
    Likes Received:
    367
    Best Answers:
    28
    Trophy Points:
    335
    #14
    You might take a closer look. @malky66 was not replying to you. As far as "learn[ing] from each other", Sharing ignorance is not a learning moment, and should rightfully be called out.

    gary
     
    kk5st, Feb 3, 2017 IP
    malky66 likes this.
  15. malky66

    malky66 Acclaimed Member

    Messages:
    3,661
    Likes Received:
    2,071
    Best Answers:
    84
    Trophy Points:
    515
    #15
    Use your eyes and learn to read before you shoot your mouth off, I was quoting Balamurugan D's worthless post.
     
    malky66, Feb 3, 2017 IP
  16. imza86

    imza86 Member

    Messages:
    50
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #16
    ok2 i thought it was for me. I didnt see his website link
     
    imza86, Feb 3, 2017 IP