Issues with my site done with boostrap - Responsive website

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

So this is my site http://www.noor-azmi.com/saj2/

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

 

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.

 

Just copy the appropriate css code from those two sites into your css container and you will be good to go.

 

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.

 

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.

 

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.

 

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.

 

Well, don't be too harsh. He might have made that site... I dunno. 10 years ago?

 

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.

 

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.

 

I agree that you are an expert in bootstrap. I recommend him to follow your solution. Bye

 

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.

 

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.

 

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

 

Use your eyes and learn to read before you shoot your mouth off, I was quoting Balamurugan D's worthless post.

 

ok2 i thought it was for me. I didnt see his website link