Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Apr 2019
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Making my website responsive

    Good afternoon

    I have managed to build my website (Sureseal: Hard Surface Restoration Specialists) but I am having problems getting the site to work across all platforms. My website looks and works perfect on Microsoft Edge but when I use Chrome the navigation bar doesn't work, also, it works fine (just a few tweaks required) on iPhone but the navigation bar doesn't work on Android.

    Can anybody help me? If you need to see the code then please ask and I will post it up here. Please be aware I am new to this s any help and advice would be much appreciated.

    Thank you in advance.

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    West Des Moines, Iowa
    Posts
    8,104
    Thanks
    37
    Thanked 1,086 Times in 1,082 Posts
    Latest percent on browser share show chrome at 63 ~ 65% and edge at 4 ~ 6%, guess which one you should code for. At first glance you have no media queries, which may or may not hinder the responsive design. The use of pixels as a measurement is wrong px are absolute measurements and don't work well with responsive design. But the worst thing I see is the overly excessive length to the page. 8 screens on my view port, how many is that on an iPhone?
    One thing I'd like to point out is the use of <br> tags instead of margins:
    Code:
    <h1 class="wow fadeInDown" data-wow-delay="2000">
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <h2 class="wow fadeInDown" data-wow-delay="2000">
    OK My 2 cents
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    New to the CF scene
    Join Date
    Apr 2019
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Good afternoon and thank you for your reply. So I should use Chrome to design my page. Great. I downloaded a template from the web and amended accordingly. I liked the flow of the page and preferred the page split in to sections rather than having to create separate pages. The br code was used to align text. As I said I am completely new to this but wanted to give it a try.

  4. #4
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    West Des Moines, Iowa
    Posts
    8,104
    Thanks
    37
    Thanked 1,086 Times in 1,082 Posts
    A funny thing on your site is where you advertise commercial services and your image has you peeing on a building. Why would a business want to hire you to do that, I wondered? You might want to think about explanation text for the images. If I were designing this that section would be a separate page and it would definitely be one for the cell phone audience site via media queries, if I couldn't sense into you.
    The br code was used to align text
    As I said, CSS margin-top would be better.
    Last edited by sunfighter; Apr 28th, 2019 at 09:40 PM.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  5. #5
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,505
    Thanks
    4
    Thanked 503 Times in 491 Posts
    *** WARNING *** I'm not going to sugar coat this. If you can't take actual criticism, just stop reading now.

    There are so many problems with that site that -- as I'm finding myself saying more and more of late -- if you brought it to me as a client I'd tell you to pitch it and start over from scratch.

    Illegible colour contrasts, illegible "thin glyph" webfonts, massive space-wasting slideshow pushing anything resembling content clear off the bottom of the screen... just at a cursory glance it has accessibility woes galore.

    But popping the bonnet to see what's going on code-wise? Yeah... well the thing is...

    Code:
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    Well there's your problem.... Bootcrap, the laundry list of how not to build a website. ANYONE telling you that steaming bloated pile of manure is how you build a website is flapping their arse-cheeks in the wind; utterly unqualified to build websites much less tell others how to do so.

    As evidenced by the train wreck of endless pointless DIV for nothing, endless pointless classes for nothing, presentational classes defeating the entire reason HTML and CSS are separate (to the point you might as well go back to writing HTML 3.2 and pretending CSS doesn't even exist)...

    ... but then there are other issues unrelated to that. Like all those style="" for setting the colour that have ZERO business in the HTML in the first place. Whitespace for nothing that could break the doctype behavior, XML for nothing, ASP.net tracking rubbish wasting bandwidth for a token that has NO business client-side in the first place (ASP.NET being just as broken nonsense as bootcrap), no media="" targets on the stylesheet <link>, multiple stlyesheets just to make the page load slower, blocking scripts in the <head> on a page that probably only needs one script (for something I probably wouldn't even have on the page: the slideshow), multiple H1 on a page that lacks SECTION and missing heading depths resulting in gibberish/broken document structure, invalid block level tags (such as H1) inside lists where the content is not "grammatical short bullet points or selections" making UL/LI completely the wrong markup, closing </ul> without matching openings, <strong> inside numbered headings, multiple BR for nothing, invalid robots meta (there's no such thing as INDEX or FOLLOW. You want it indexed and followed you omit the meta entirely!), multiple viewport meta, X-UA nonsense no site written after the creation of IE7 should even be using (it was created to tell new browsers to use old rendering, not to set to the latest only!), "placeholder is not a label" inside incomplete forms, etc, etc, etc.

    Even some of the commenting style is silly. <div id="about"> is <!-- start about -->, really? Never would have guessed.

    Though some of that can be blamed on that stupid flexslider garbage. Just more nube predation. There's a lot of predatory scam artist nonsense out there taking advantage of people who don't know better. jQuery, Bootcrap, flexslider, etc, etc...

    The laugh being that you're using bootcrap which is supposedly out of box "responsive" and yet it isn't. Good rule of thumb? Anything telling you to use classes that say what things look like (text-center, col-4-xs, etc) is incompetent trash created by people who have no business making websites. Same for your tags, if you're choosing H1..H6 because of the text-size or font-weight you want, you're doing it all wrong!

    Hardly a shock then that it is blowing 24k of markup on doing around 12k's job. Without fixing anything else, it's twice the markup needed.

    If I were writing the same page (which I wouldn't) there's little reason for the markup to be much more than:

    Code:
    <!DOCTYPE html><head><meta charset="utf-8">
    <meta
    	name="viewport"
    	content="width=device-width,height=device-height,initial-scale=1"
    >
    <meta
    	name="description"
    	content="natural language paragraph describing the site"
    >
    <meta
    	name="keywords"
    	content="seven,or,eight,single,words,you,want,uprank"
    ><!-- said words should exist as plaintext inside BODY -->
    <link
    	rel="stylesheet"
    	href="template/screen.css"
    	media="screen,projection,tv"
    ><!-- HTML 5 will complain about projection and TV, f*** that noise -->
    <title>
    	Sureseal: Hard Surface Restoration Specialists
    </title>
    </head><body>
    
    <h1>Sureseal: Hard Surface Restoration Specialists</h1>
    
    <input type="checkbox" id="toggle_top">
    
    <div id="top">
    	<label for="toggle_top"></label>
    	<ul id="mainMenu">
    		<li><a href="#home">HOME</a></li>
    		<li><a href="#service">SERVICES</a></li>
    		<li><a href="#about">SOFTWASHING</a></li>
    		<li><a href="#team">NANO-TECH</a></li>
    		<li><a href="#portfolio">COMMERCIAL</a></li>
    		<li><a href="#contact">CONTACT</a></li>
    	</ul>
    	<div>
    		Tel: 033 577 8085<br>
    		E-Mail: [email protected]
    	</div>
    <!-- #top --></div>
    
    <div class="slideshow">
    	<div>
    	 <span style="background-image:url(images/slider/1.jpg)"></span>
    		<h2>Hard Surface Restoration Specialists</h2>
    		<p>
    			Cleaning, Sealing & &AMP; Protective Coatings
    		</p>
    		<a href="#service">Our Services</a>
    	</div><div>
    		<span style="background-image:url(images/slider/2.jpg)"></span>
    		<h2>Specialised render treatment and protective coating systems</h2>
    		<a href="#about">Render Treatments</a>
    	</div><div>
    		<span style="background-image:url(images/slider/3.jpg)"></span>
    		<h2>Block Paving Restoration Services</h2>
    		<p>
    			From a basic clean to full restorations including sealant applications.
    		</p>
    		<a href="#service">Revive your drive</a>
    	</div><div>
    		<span style="background-image:url(images/slider/4.jpg)"></span>
    		<h2>Pattern Imprinted Concrete Restorations</h2>
    		<p>
    			Re-colouring, re-sealing, crack repairs and anti-slip coatings.
    		</p>
    		<a href="#service">Imprinted Driveways</a>
    	</div><div
    		<span style="background-image:url(images/slider/5.jpg"></span>
    		<h2>Commercial and Industrial Solutions for</h2>
    		<p>
    			Local Authorities, Project managers and property developers.
    		</p>
    		<a href="#portfolio">Commercial Services</a>
    	</div>
    <!-- .slideshow --></div>
    
    <div id="services">
    	<div>
    		<h2>Driveway Cleaning</h2>
    		<p>
    			Sureseal specialise in all aspects of driveway cleaing in Cheshire including block paving cleaning, re-sanding and sealing. If you have a pattern imprinted concrete driveway that has faded over time, we can re-colour and re-seal the concrete and bring it back to life and add an anti-slip coating to make it safer under foot when wet. Tarmac can also be restored with a thorough clean to remove moss and dirt and then it can be re-coloured to restore it back to its natural colour. We can carry out minor remidial works to repair any cracks or breaks in all driveway types and also have the chemicals to remove stubborn stains or oil spills.
    		</p>
    	</div><div>
    		<h2>Roofline Protection</h2>
    		<p>
    			If your roofline is looking tired and dirty then our roofline protection services can resolve this. Get instant kerb appeal with our roof cleaning in Cheshire. We can use one of our softwash treatments to kill off any moss, algae or lichens. When this process is completed, we can apply a clear or a coloured protective coating to the tiles. If the roof is in a really bad condition then we can add a pre-treatment to the roof prior to jet washing the surface. Which ever method we use, we can guarantee that your property will stand out from your neighbours and will be protected for years to follow.
    		</p>
    	</div><div>
    		<h2>Natural Stone</h2>
    		<p>
    			Internal and External natural stone can be brought back to life with our stone and patio cleaning services in Cheshire. If you have an Indan stone patio or a Slate kitchen floor, our products and expertise will breathe new life into your hard surface. In most cases, natural stone doesnt need pressure washing or steam cleaning. The correct combination of anti-fungal biocide and stone impregnators will achieve fantastic results with minimal disruption. We also offer a re-pointing service if your patio joints are severely deteriorated and have the correct chemicals to tackle stubborn stains left behind after a summer barbeque or accidental spillage.
    		</p>
    	</div>
    <!-- #services --></div>
    
    <div id="moneyBack">
    	<h2>
    		100% MONEY BACK GUARANTEE<br>
    		<small>10 Year Algae Free Warranty (T's & C's Apply)</small>
    	</h2>
    	<p>
    		All of our restoration technicians have undergone intensive training on cleaning techniques, identifying the correct sealant to use and applying protective coatings. Once we have completed our restoration, you will have the option to sign up to an annual maintenace plan to keep the algae and dirt away for up to 10 years. If this is unsuccessful then you will be entitled to a full refund of the cost of the initial restoration. Full terms and conditions will be provided upon acceptance of a maintenance plan.
    	</p>
    <!-- #moneyBack --></div>
    
    <div id="about">
    	<h2>
    		What Is Softwashing?<br>
    		<small>A Low Pressure Cleaning Alternative</small>
    	</h2>
    	<p>
    		Softwashing is a safe cleaning process with no risk of damage to your hard surfaces. It is a safe, effective and affordable non-pressure cleaning system that eliminates and removes moss, stains and algae.
    	</p><p>
    		The build-up of moss on a roof does not only look unsightly but it can lead to blocked gutters and drains. We provide a professional roof cleaning and moss removal service throughout the North West. Once your roof has been cleaned of moss we apply an application of our surface protector as a preventative treatment to inhibit future moss growth.
    	</p><p>
    		As roofs age, the original protective layer on the face of the tile is gradually eroded by the elements and increases the porosity of the tile.  This then allows moisture to penetrate easily into the roof tiles. Moss thrives on damp or wet surfaces, and the moisture retained enables moss spores to establish themselves and become ingrained within the tile.
    	</p><p>
    		There is no easier way to improve and maintain the appearance of your property than to keep the roof clean and free of unsightly moss, mould and algae. The black streaks that you see appear on your roof are actually caused by algae, mould and other bacteria that are feeding, growing and spreading on your roof surface.
    	</p><p>
    		Not only are these causing the appearance of your roof to deteriorate, but it can cause the premature degradation of your roof and can cost you thousands in repairs.
    	</p><p>
    		Those black stains and coloured splotches on your roof are evidence of algae, fungi, lichen, mildew, and moss. These organic materials are not going to go away on their own. When left to their own devices, these organic materials will eventually cause damage to your roof. The way to solve this problem is to have your roof cleaned and the moss removed thus avoiding further degradation and deterioration.
    	</p><p>
    		Softwashing is mainly used to make cleaning a roof easier and safer for our cleaning technicians. It is also used on other hard surfaces where extreme pressure washing is not required. We use our softwash systems to apply pre-treatments to surfaces prior to cleaning and also to apply moss killer and our range of Extreme Clean detergents to rendered surfaces, tiles, concrete and natural stone surfaces.
    	</p><p>
    		Call now for a free no obligation quote.
    	</p>
    <!-- #about --></div>
    
    <div id="team">
    	<h2>Nano-Tech Coating Systems</h2>
    	<div>
    		<h3>
    			<span>WD Sureseal Coat<br></span>
    			<img src="images/team1.jpg" alt="Wood/Timber">
    			Wood/Timber
    		</h3>
    		<p>
    			Protects and seals in one treatment saving in maintenance and cleaning. Hydro and oleophobic. No breakdown by rainfall. The applied nanocoating gives long-lasting protection against dirt moss and algae.
    		</p>
    	</div><div>
    		<h3>
    			<span>GS1 Sureseal Coat<br></span>
    			<img src="images/team2.jpg" alt="Glass/Ceramic"">
    			Glass/Ceramic
    		</h3>
    		<p>
    			Stain and water resistant. Less washing of glass by the self-cleaning effect. Invisible and transparent and also repells ice. Lime scale is easy to wipe off with a wet cloth after this surface sealant is applied.
    		</p>
    	</div><div>
    		<h3>
    			<span>2C Sureseal Coat</span>
    			<img src="images/team3.jpg" alt="Metal/Alloys">
    			Metal/Alloys
    		</h3>
    		<p>
    			Colour restoring. Long-term protection from the weather. Dirt no longer adheres to the surface and can be removed easily with water. Less maintenance and cleaning and maintains a long lasting shine.
    		</p>
    	</div>
    <!-- #team --></div>
    
    <form id="newsletter">
    	<h2>Get our newsletter!</h2>
    	<p>
    		Sign up to our newsletter to keep up to date with our services and special offers.
    	</p>
    	<fieldset>
    		<label for="newsletter_email">Enter your E-mail Address</label><br>
    		<input
    			type="email"
    			name="email"
    			id="newsletter_email"
    		>
    		<button>Sign Up</button>
    	</fieldset>
    </form>
    
    <div id="portfolio">
    	<h2>Commercial Services</h2>
    	<div>
    		<span style="background-image:url(images/portfolio-img1.jpg)"></span>
    		<h3>Chewing Gum Removal</h3>
    		<p>
    			Small or large area chewing gum removal service.
    		</p>
    	</div><div>
    		<span style="background-image:url(images/portfolio-img2.jpg)"></span>
    		<h3>Urine Deflection Systems</h3>
    		<p>
    			Specialist coatings for hard surfaces that are being used as a toilet. The coating that fights back.
    		</p>
    	</div><div>
    		<span style="background-image:url(images/portfolio-img3.jpg)"></span>
    		<h3>Graffiti Removal & Anti Graffiti Coatings</h3>
    		<p>
    			High pressure or chemical stripping of graffiti/paint spillages. We can also apply anti-graffiti coatings to many hard surfaces.
    		</p>
    	</div><div>
    		<span style="background-image:url(images/portfolio-img4.jpg)"></span>
    		<h3>Exterior Brickwork Cleaning</h3>
    		<p>
    			General pressure washing, steam cleaning and acid washing of new build/existing properties.
    		</p>
    	</div><div>
    		<span style="background-image:url(images/portfolio-img5.jpg)"></span>
    		<h3>Car Park Cleaning/Maintenance</h3>
    		<p>
    			High pressure cleaning and moss/debris removal for large car parking and communal areas.
    		</p>
    	</div><div>
    		<span style="background-image:url(images/portfolio-img6.jpg)"></span>
    		<h3>Stone Memorial Restoration</h3>
    		<p>
    			Softwash treatment systems for stone memorials of all types.
    		</p>
    	</div>
    <!-- #portfolio --></div>
    
    <div id="footer">
    
    	<div class="socialMedia">
    		<h2>Sureseal Surface Restorations Ltd</h2>
    		<p>
    			If you require further details about any of our services then please use any of the contact methods on this page. We are also active on Facebook, Twitter and LinkdIn. Click on the links below to navigate to our social media pages.
    		</p>
    		<ul>
    			<li class="facebook">
    				<a href="https://www.facebook.com/SuresealUK">
    					Facebook
    				</a>
    			</li>
    			<li class="twitter">
    				<a href="https://twitter.com/SuresealUK">
    					Twitter
    				</a>
    			</li>
    			<li class="linkedIn">
    				<a href="https://www.linkedin.com/in/sureseal-surface-restorations-ltd">
    					LinkedIn
    				</a>
    			</li>
    		</ul>
    	</div>
    
    	<div id="contactInfo">
    		<h2>Contact Us</h2>
    		<div class="address">
    			544 Crewe Road, Wistaston<br>
    			Crewe, CW2 6PP
    		</div>
    		<div class="phone">
    			0333 577 8085
    		</div>
    		<div class="email">
    			[email protected]
    		</div>
    	<!-- #contactUs --></div>
    
    	<form action="#" method="post" id="contactUs">
    		<fieldset>
    			<div>
    				<label for="contactUs_name">Your Name:</label><br>
    				<input type="text" name="name" id="contactUs_name">
    			</div><div>
    				<label for="contactUs_email">E-Mail Address:</label><br>
    				<input type="email" name="email" id="contactUs_email">
    			</div><div>
    				<label for="contactUs_message">Message:</label><br>
    				<textarea name="message" id="contactUs_message" rows="5"></textarea>
    			</div>
    			<button>Send</button>
    		</fieldset>
    	</form>
    
    	<div class="google_map"><div id="map-canvas"></div></div>
    
    	<div id="disclaimer">
    		&copy; 2019 Sureseal Surafce Restorations Ltd
    	</div>
    
    <!-- #footer --></div>
    
    <script src="library.js"></script>
    
    </body></html>
    Once garbage like jQuery and bootcrap get kicked to the curb. Amazingly another one of the situations fitting that 1% where style="" is actually something to use, 99% of the time it's a sign of developer ignorance!. I put the images into span since they're presentation, not content and it lets us use background-size so we don't have to sweat scaling.

    ... and remember, H1 is the heading for the <body> or <section> it is a child of, the best candidate for the H1 being the site name/logo since everything after the H1 is content of said <body> or <section>. Think if it as how in a book or newspaper the name of that document appears at the top of each page or fold-pair. That's why multiple H1 without a SECTION tag for them is nonsensical. H2 means the start of a subsection of the H1 for that body/section with the first H2 the start of your main content unless you use HTML 5's (pointlessly redundant) <main> tag, H3 is the start of a subsection of the H2 preceding it, H4 marks the start of a subsection of the H3 preceding it, and so forth. Care to guess what H5 and H6 mean? That's why pairing H4 before a H3 like you were is utter gibberish from a non-"screen media" navigational standpoint.

    Since HTML is about MORE than what you want things to look like for the people with perfect vision on screens. That's not what it was created for or it's job. HTML is for saying what things are -- semantically, grammatically, structurally -- so that the user-agent can best convey or interpret that meaning. A browser is a UA but a UA isn't always a browser.. To that end HTML tags have meanings completely separate from their default appearance. This even applies to B/I/STRONG/EM, all four of which have different meanings.

    EVERYTHING else you're trying to do goes into the single external stylesheet or script.

    I know that's a lot to take in, and it can come across as harsh, but that's the truth of what's going on here. Truth often hurts, which is why people are so often ready to accept blatant lies. Like bootstrap actually being something worth using.
    Last edited by deathshadow; Apr 29th, 2019 at 03:58 PM.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  6. #6
    Regular Coder Strider64's Avatar
    Join Date
    Dec 2011
    Posts
    274
    Thanks
    5
    Thanked 33 Times in 33 Posts
    To me framework and Libraries get in the way of learning HTML, CSS and JavaScript. A person still has to know HTML/CSS even if Bootstrap was the next best thing to slice bread. You have learn on to code using the bootstrap "Way", which to me is an unnecessary step and can be very confusing to a person who doesn't even have the basic knowledge of HTML/CSS. The only way I would use bootstrap is if an employer forced to me to do so and thankfully I don't. I ran in problem when I took a HTML/CSS course in college where the instructor had us using jQuery. jQuery is also an unnecessary step and you can just as easily accomplish what you want to in good old vanilla javascript with even less code as you don't have to connect a library before you can use it. Just my .02 cents
    Last edited by Strider64; Apr 29th, 2019 at 05:06 PM.
    "A person who never made a mistake never tried anything new." ~ Albert Einstein https://www.miniaturephotographer.com

  7. #7
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    West Des Moines, Iowa
    Posts
    8,104
    Thanks
    37
    Thanked 1,086 Times in 1,082 Posts
    jQuery is also an unnecessary step and you can just as easily accomplish what you want to in good old vanilla javascript ....
    Modern CSS has taken over a lot that JS was needed for. If they keep going CSS might replace JS. Hard to keep up with the changes.

    Death to Jquery and Bootstrap. And "no" I am not including W3Schools in that manifesto. It's still the fastest and easiest way to learn.
    Y'all know I'm just kidding?
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  8. #8
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,505
    Thanks
    4
    Thanked 503 Times in 491 Posts
    Quote Originally Posted by sunfighter View Post
    And "no" I am not including W3Schools in that manifesto. It's still the fastest and easiest way to learn <ins>how to do it wrong</ins>.
    There, fixed.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  9. #9
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,505
    Thanks
    4
    Thanked 503 Times in 491 Posts
    Quote Originally Posted by Strider64 View Post
    you can just as easily accomplish what you want to in good old vanilla javascript with even less code as you don't have to connect a library before you can use it. Just my .02 cents
    Thing is it's often less code without counting the size of the library against it, and easier to write/maintain. That's where much of jQuery just goes full Gungan.

    Meesa sayz yews neva goes FULL Gungan.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •