Help me regarding my responsive site

Hi, this is my site http://www.noor-azmi.com/saj2/index.html.

When minimize the window up till 991px, you can see that the logo will cover some part of the navbar on the right.

I have checked several responsive sites such as this https://calhounsuperstructure.com/ and you can see when browser window minimize, the logo should also change to a smaller size.

How do i do that ?

Also another question is why is there a space between my nav bar and my header image ? How do i remove the space? Thanks !

 

Hi imza please add this to your css file

@media only screen and (max-width: 991px) {
#logo{
float: left;
    background-color: white;
    margin-top: 30px;
    position: absolute;
    max-width: 230px;
    height: 60px;
    padding: 5px;
    padding-top: 15px;

}
#logo img{
width:100%;
}
}

Code (CSS):

You can find more related to media queries here http://www.w3schools.com/css/css_rwd_mediaqueries.asp

 

For your second question you can solve it like that in css file:

.navbar{
    border: none;
    border-radius: 0 !important;
}

Code (markup):

Cheers!

 

Hi @Steve. Thank you so much. Before this i thought bootstrap will automatically makes everything fine, but no. It seems that i still need to do the media queries myself. I have managed to make logo size smaller as the browser minimizes. Now i have another issue.

When browser is minimized to mobile size of 767px, the "hamburger menu" will appear. My problem is now the nav is not clearly seen as there is no BG colour, BG is transparent. How do i add in a BG colour ?

 

I think you are using Bootstrap for making your site responsive. To make the responsive website you have to apply bootstrap grids. To tell you about the grid system-
1. There are rows and columns in the bootstrap grid system.
2. There are 12 columns which can be adjusted based on the size of the screen.
3. Columns are of 4 types (.col-xs-* .col-sm-* .col-md-* .col-lg-*)
4. Columns remains float:left one another and slack when the screen size becomes smaller. The slacking is actually determined by step 3 (columns types).

If you want to understand bootstrap working, then they are all given at the tutorial - How to use bootstrap - here

Now regarding the logo ( which is an image), you need to apply class "img-responsive" to make images responsive in bootstrap. Mainly we consider the smartphone to be the starting point (width 320px) in bootstrap. So if your logo width is smaller than 320px then you can remove the "img-responsive" class. But you also have to see how many columns are there in the row.

So basically when you understand the bootstrap grid system then you will be able to work on bootstrap easily and then you can will know how easy and powerful it is.

Note- For people using media queries in CSS, they should update their website with bootstrap because bootstrap is fast, easy and very powerful.

 

Which is probably 99%+ of the OP's problem given what a steaming pile of dung that pile is... which is why they need to go find a stick to scrape that bootcrap off with.

Except of course when it makes you write more markup than you need, actively encourages you to piss on accessibility using pixel metric layout concepts, defies the very reason HTML and CSS are separate in the first place, and on the whole makes you work harder, not smarter. I really wonder what the **** is in the kool-aid when people describe bootcrap in terms of being fast, easy, or powerful, as to be brutally frank it is NONE of those things!

Which is why IMHO anyone suggesting that you use bootcrap doesn't know enough about HTML, CSS, accessibility, usability, user experience, sustainability, or any other aspect of web development to be flapping their ignorant gums on the topic.

@imza86 as to the problem at hand, given the inaccessible pixel metric fonts, sections of dubious colour contrasts, images doing plaintext's job, design concepts incompatible with responsive layout if you care about what responsive is for -- accessibility -- I'd be taking that site 'round back o' the woodshed with a .30-06 and putting a bullet in its brain. There is very little I would salvage from that mess as it seems intentionally designed to flip a double bird at visitors to the site.

This is evident right down to the HTML where you have presentational images in the markup, no logical document structure, gibberish use of numbered headings, scripttard show/hide of content sections not big enough to waste time showing/hiding, attributes that are no longer needed/used, lack of media targets on the LINK, multiple stylesheets for nothing, hard to read goof-assed webfont, static scripttardery in the markup, and of course bootcrap pissing all over the place with the endless pointless classes for NOTHING that amounts to little more than ignoring what HTML is for, why HTML and CSS are separate, and amounting to little more than sleazing site development practices back to the worst of 1997 style thinking.

Seriously, the way bootcrap uses classes, you might as well go back to writing HTML 3.2 and the browser proprietary crap that follows pretending CSS doesn't even exist, it's THAT flawed a development mindset.

Also there's no such thing as </img>, and some punctuation might make it seem a hair more legitimate.

There is likely zero legitimate reason for the code on such a page to vary significantly from:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta
	name="viewport"
	content="width=device-width,height=device-height,initial-scale=1"
>
<link
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
>
<title>
	SAJ Horizon Pte Ltd
</title>
</head><body>

<div id="top"><div class="widthWrapper">

	<h1>
		<a href="">
			SAJ HORIZON (S) PTE LTD
		</a>
	</h1>

	<div class="quickContact">
		97638526
		<span>|</span>
		<a href="about.html">Get your quote now!</a>
	</div>

	<input type="checkbox" id="mainMenuShowHide">
	<label for="mainMenuShowHide"></label>
	<ul id="mainMenu">
		<li><a href="index.html">Home</a></li>
		<li><a href="about.html">About</a></li>
		<li class="dropdown">
			<span>Products</span>
			<ul>
				<li><a href="cummins.html">Cummins</a></li>
				<li><a href="gardner.html">Gardner Denver</a></li>
				<li><a href="ABB.html">ABB</a></li>
			</ul>
		</li>
		<li><a href="partnership.html">Partnership</a></li>
		<li><a href="contact.html">Contact</a></li>
	</ul>

<!-- .widthWrapper, #top --></div></div>

<div class="homeBanner">
	<img
		src="images/homeBanner.jpg"
		alt="DESCRIBE THIS IMAGE, ALT IS NOT OPTIONAL!!!"
		class="fillPlate"
	>
	<div class="widthWrapper">
		<h2>Our Strength is in Our Structure</h2>
		<p>
			We have the best team of professionals marine engineers
		</p>
	<!-- .widthWrapper --></div>
<!-- .homeBanner --></div></div>

<div class="widthWrapper">
	<div class="contentWrapper"><div id="content">

		<div class="subSelection">
			<h3>Products</h3>
			<img
				src="images/products.jpg"
				alt="DESCRIBE THIS IMAGE, ALT IS NOT OPTIONAL!!!"
			>
			<ul>
				<li>Our brands are ABB, Gardner Denver & Cummins</li>
				<li>Engines Propulsion Packages</li>
				<li>Pump for Sludge, Bilge & Sewage</li>
			</ul>
		<!-- .subSelection --></div>

		<div class="subSelection">
			<h3>Services</h3>
			<img
				src="images/services.jpg"
				alt="DESCRIBE THIS IMAGE, ALT IS NOT OPTIONAL!!!"
			>
			<ul>
				<li>Marine Engineering</li>
				<li>Turnkey Solutions</li>
				<li>Offshore maintenance</li>
			</ul>
		<!-- .subSelection --></div>

		<div class="subSelection">
			<h3>Partnership</h3>
			<img
				src="images/partnership.jpg"
				alt="DESCRIBE THIS IMAGE, ALT IS NOT OPTIONAL!!!"
			>
			<p>
				Partnerships are an essential part of the way we do business, enabling us to accelerate our growth, operate in new markets and deliver essential services.
			</p>
		<!-- .subSelection --></div>

		<p>
			SAJ Horizon Singapore was established in year 2007 to support the growing demand in the oil & gas and marine sector. We supply engines and spare parts as well as lease and supply pumps and water jetting systems to customers in the Asian and Oceanic regions.We also supply marine engines accessories, such as engine oil and filters. <a href="about">Read more about us here.</a>
		</p>

		<img
			src="images/engineers.jpg"
			class="fillerPlate"
		>
	<!-- #content, .contentWrapper --></div></div>

	<div id="extras">

		<div id="whyUs" class="subsection">
			<h2>Why us?</h2>
			<p>
				We are good at what we do.and we have been established since 2007. We are flexible in our approach, contact us now to find out more.
			</p>
			<img
				src="images/whyUs.jpg"
				alt="DESCRIBE THIS IMAGE, ALT IS NOT OPTIONAL!!!"
				class="fillerPlate"
			>
		<!-- #whyUs.subsection --></div>

		<div id="contactUs" class="subsection">
			<h2>Contact us</h2>
			<img
			 src="images/contact.jpg"
				alt="DESCRIBE THIS IMAGE, ALT IS NOT OPTIONAL!!!"
				class="fillerPlate"
			><br>
			10 Bt Batok Cresent</br>
			Spire Building #12-04</br>
			Singapore 658079 </br>
			Tel : 6896 7879 </br>
			Fax : 6896 7170
		<!-- #contactUs.subsection --></div>

	<!-- #extras --></div>

	<div id="footer">
		<hr>
		All rights reserved SAJ Horizon Pte Ltd
	<!-- #footer --></div>

<!-- .widthWrapper --></div>

</body></html>

Code (markup):

With everything else being done in a custom CSS file. Shaves 2k off it, and reduces the number of handshakes by not slopping in a bunch of separate files for nothing making it take longer to load than it has to. Logical heading order (assuming those areas I called .subSelection are subsections of "Our Strength is in Our Structure" which I'm not entirely sold on)

I mean, you were close on the semantic markup, but it had so much bootcrap dumped on it you'd think it was Biff's '48 Ford Super De Luxe.