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.

Slideshow acting poorly on mobile devices

Discussion in 'CSS' started by Celador, Jan 15, 2016.

  1. #1
    Hello!

    I made a homepage for my family during this past week (www.celador.se). Given that it was my first time working with CSS, I used templates for most of the more complicated stuff - including the banner.

    Everything is working fine right now for Chrome and Safari, but on my tablet and phone the slideshow at the top of the page is 3 or 4 times as elongated as the rest of the page.

    I tried using modifiers like

    "@media only screen and (max-width: 480px) {.slides, .slide width:300px;} " (edit: posted the mobile styles at the bottom of this page if it helps).

    but nothing at all happens. Can anyone help me out?

    code:


    .slides {
    padding: 0;
    width: 1170px;
    height: 330px;
    display: block;
    margin: 0 auto;
    position: relative;
    }

    .slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    }

    .slides input { display: none; }

    .slide-container { display: block;}
    .slide {
    top: 0;
    opacity: 0;
    width: 1170px;
    height: 330px;
    display: block;
    position: absolute;

    transform: scale(0);

    transition: all .7s ease-in-out;
    }

    .slide img {
    width: 100%;
    height: 100%;
    }

    .slideshownav label {
    width: 200px;
    height: 100%;
    display: none;
    position: absolute;

    opacity: 0;
    z-index: 9;
    cursor: pointer;

    transition: opacity .2s;

    color: #FFF;
    font-size: 156pt;
    text-align: center;
    line-height: 380px;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
    }

    .slide:hover + .slideshownav label { opacity: 0.5; }

    .slideshownav label:hover { opacity: 1; }

    .slideshownav .next { right: 0; }

    input:checked + .slide-container .slide {
    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;
    }

    input:checked + .slide-container .slideshownav label { display: block; }

    .slideshownav-dots {
    width: 100%;
    bottom: 9px;
    height: 11px;
    display: block;
    position: absolute;
    text-align: center;
    }

    .slideshownav-dots .slideshownav-dot {
    top: -5px;
    width: 11px;
    height: 11px;
    margin: 0 4px;
    position: relative;
    border-radius: 100%;
    display: inline-block;
    background-color: rgba(177, 0, 0, 33);
    }

    .slideshownav-dots .slideshownav-dot:hover {
    cursor: pointer;
    background-color: rgba(117, 34, 0, 1);
    }

    input#img-1:checked ~ .slideshownav-dots label#img-dot-1,
    input#img-2:checked ~ .slideshownav-dots label#img-dot-2,
    input#img-3:checked ~ .slideshownav-dots label#img-dot-3,
    input#img-4:checked ~ .slideshownav-dots label#img-dot-4,
    input#img-5:checked ~ .slideshownav-dots label#img-dot-5,
    input#img-6:checked ~ .slideshownav-dots label#img-dot-6 {
    background: #F867B3
    }


    #linklist {
    width: 200px;
    margin: 30px;
    }

    h2.linklist {
    font: 400 40px/1.5 Helvetica, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    font-weight: bold;
    letter-spacing: -2px
    }

    ul.linklist {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

    li.linklist {
    font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
    border-bottom: 1px solid #ccc;
    }

    li.linklist:last-child {
    border: none;
    }

    li.linklist a {
    text-decoration: none;
    color: #b10021;
    -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
    -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
    -o-transition: font-size 0.3s ease, background-color 0.3s ease;
    -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
    transition: font-size 0.3s ease, background-color 0.3s ease;
    display: block;
    width: 200px;
    }

    li.linklist a:hover {
    font-size: 30px;
    background: #f6f6f6;
    }




    MOBILE STYLES - the following is what was already in the stylesheet-template that I used, like I said I tried just adding something that looked..well.. similar but to no avail.

    /* mobile styles */
    @media only screen and (max-width: 480px) {
    h2 { margin-bottom: 5px; }
    .navbar-form { margin-top: 0px; width: 100%; }
    .templatemo-nav { position: fixed; top: 25px; right: 3px; z-index: 1000; }
    .nav-justified > li > a { padding-left: 40px; padding-right: 40px; }
    #thumbnails_container { margin-left: 10px; margin-right: 10px; padding-left: 5px; padding-right: 5px; }
    #thumbnails_container .col-xs-4, #thumbnails_container .col-sm-3, #thumbnails_container .col-md-3 { padding-left: 5px; padding-right: 5px; }
    .section_box { height: auto; width: 100%; max-width: none; min-height: 1px; }
    #templatemo_footer { margin-bottom: 5px; }
    .slide {width: 480; height:200;}
    .slides {width: 480; height:200;} /* JUST TESTING WITHOUT .PX*/

    }

    /* tablet styles */
    @media only screen and (min-width: 481px) and (max-width: 767px) {
    h2 { margin-bottom: 5px; }
    .navbar-form { margin-top: 0px; width: 100%; }
    .templatemo-nav { position: fixed; top: 25px; right: 3px; z-index: 1000; }
    .nav-justified > li > a { padding-left: 40px; padding-right: 40px; }
    #thumbnails_container { margin-left: 20px; margin-right: 20px; padding-left: 5px; padding-right: 5px; }
    #thumbnails_container .col-xs-4, #thumbnails_container .col-sm-3, #thumbnails_container .col-md-3 { padding-left: 10px; padding-right: 10px; }
    #download_box { float: left; padding-top: 10px; margin: 0 auto; }
    .preview_footer_container { margin-top: 10px; }
    .footer_item { margin-right: 10px; }
    .footer_item:last-child { margin-right: 0px; }
    .section_box { height: auto; width: 100%; max-width: none; min-height: 1px; }
    #templatemo_footer { margin-bottom: 5px; }
    .slide {width: 480; height:200;}
    .slides {width: 480; height:200;} /* JUST TESTING WITHOUT .PX*/
    }

    /* desktop styles */
    @media only screen and (min-width: 768px) and (max-width: 991px) {
    .navbar-header h2{ margin: 0px; margin-top: 34px; }
    #thumbnails_container .col-xs-4, #thumbnails_container .col-sm-3, #thumbnails_container .col-md-3 { padding-left: 10px; padding-right: 10px; }
    .preview_footer_container { margin-top: 30px; }
    .footer_item { margin-right: 15px; }
    .footer_item:last-child { margin-right: 0px; }
    .section_box { height: 330px; max-width: 230px; }
    }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header{ margin-left: 30px; }
    .navbar-header h2{ margin: 0px; margin-top: 34px; }
    #thumbnails_container .col-xs-4, #thumbnails_container .col-sm-3, #thumbnails_container .col-md-3 { padding-left: 10px; padding-right: 10px; }
    .preview_footer_container { margin-top: 30px; }
    }
    @media only screen and (min-width: 1200px) {
    #thumbnails_container .col-xs-4, #thumbnails_container .col-sm-3, #thumbnails_container .col-md-3 { padding-left: 10px; padding-right: 10px; }
    .preview_footer_container { margin-top: 66px; }

    }
     
    Celador, Jan 15, 2016 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Just a warning, this may seem harsh, but keep in mind I'm about to try and teach you some things I bet you won't find covered many places... to the point I almost think the people currently writing about site development professionally are trying to sabotage their competition.

    I'm going to do a rewrite of your markup and if I have time later, CSS to go with it to show you how I'd approach that, how to trim the fat, and to better explain what I'm about to say. For now you might want to read my "what's wrong with YOUR website" article:

    http://www.cutcodedown.com/article/whats_wrong_with_YOUR_website_index

    Just to have an idea of some of the things I'm about to cover.

    I do these rewrites from time to time when I see someone with potential being led down the garden path to failure; for a rookie who's been duped into using bootcrap, your mistakes aren't unexpected -- but you're showing a LOT of common sense and intuitive design decisions that even advanced "experts" often fail to do.

    Really your biggest problem is the "thinking in pixels" -- you've got pixel widths, pixel media queries, and the steaming pile known as bootstrap bloating out the markup (a good third probably needs to go) and making an already slow page slower. A properly accessible site should have dynamic fonts (declared in % or EM), elastic design (padding and widths in EM where possible), and semi-fluid layout (expanding/contracting between a min and max-width) LONG before you even THINK about making it responsive.

    As to the subject of slow? File sizes! You've got massive PNG (to the tune of 23 megabytes) that is likely making most forum members here not even wait for it to finish loading to try and help you. Most of that is a lack of image compression on your JPEG, most of which could hit 15 or 20% "lossy" without anyone really noticing, the rest of which being the use of massive megabyte sized .png files to do JPEG's job. Optimize those files or nobody -- not even family and friends -- will even want to visit. Not really your big problem, but it's a common rookie mistake that the sooner we point it out to you, the better! You basically have 16 megabytes of images that if I were to ballpark guesstimate, probably should be around a fifth that in file sizes. It makes the page PAINFUL to watch load.

    You have a number of issues and shortcomings in your page that are ... well to be brutally frank (you're rarely if ever to find me anythin but) are why you are having problems. Somewhere along the way someone has packed you full of sand resulting in the use of presentational markup and pixel measurements -- two things that are the antihesis of accessible design.

    There are many things that are "stepping stones" to accessible site creation; sadly "frameworks" like bootcrap just teach you sloppy coding habits that combined with skipping all those steps rarely results in a usable website. Hence the first thing I suggest you do is learn to use HTML and CSS correctly, kicking the mouth-breathing halfwit nonsense that is bootcrap to the curb.

    The first of those "steps to High Hrothgar" is semantic markup. This is a big fancy term that actually means "using HTML properly" -- we just use the sick euphemism so as to humor the fools who've been doing this for a decade or more and still cannot grasp the simplest of concepts.

    What it means is anything you put in your HTML should be saying what things ARE, and NOT what they look like. You've clearly fallen into this trap since you have tags like CENTER in there which have zero business on any website written after 1997. Same goes for your use of numbered headings where you seem to be using them to say what size things are, not as... well... HEADINGS to indicate the start of subsections of the page.

    A h1 is the heading under which everything on the page is a subsection... that's why the site title is the most likely candidate for this since everything on every page of a site is a subsection of that. H2 indicates the start of a subsection of the h1, h3 indicate the start of subsections of the H2 and so forth down the line. That's why having H6 before H5 is gibberish. In that same way a HR does NOT mean "draw a line across the screen", it means a break or change in topic where a numbered heading is unwanted or unwarranted... these meanings combined are why a LOT of HTML 5's new ALLEGEDLY semantic/structura tags are just pointless redundancies that provide nothing of value. Section, header, footer, article, nav -- All pointless if you just use numbered headings and horizontal rules for what they were intended for.

    Admittedly, I say the same thing about ASIDE, which is as pointlessly presentational in meaning as CENTER!

    As I'm always saying, if you are choosing your tags based on their default appearance, you are choosing all the wrong tags for all the wrong reasons.

    Said issue becomes apparent if you pull up a document outline -- something people on non-visual UA's need/use and that search and other "crawlers" can leverage as well. Your current document outline is this:
    [​IMG]

    How does that make any sense? "Celedor", "<3", "Famijen Celador" are probably NOT the start of subsections of "Bakgrund til namnet"... but that's what your heading orders are claiming. You chose your heading tags based on their appearance, NOT their meanings.

    Let's just go through the markup first. See this?

    
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />
    Code (markup):
    That first ones maximum-scale and user-scalable breaks mobile users ability to zoom -- that's accessibility rubbish and those values should NEVER be declared no matter how many halfwits out there will tell you otherwise. Not your fault, there's a LOT of really bad advice on that out there. I would suggest removing the latter two properties and adding "height=device-height" since some android devices report their height as width when rotated. (I tell you that drove me nuts trying to figure it out first time I came across it!)

    The second one just overrides the first, so of that the ONLY thing that's working is the width=device-width... typically with META you can/should only have ONE of each "name", which is why I prefer putting the name attribute first so you can see up front which ones you have and any duplicates.

    These:
    
    	<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    	<link href="css/justified-nav.css" rel="stylesheet" type="text/css">
    	<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
    Code (markup):
    You're in HTML 5, you don't need to say "type" anymore. (about freaking time) since rel="stylesheet" is already telling us that. The big problem though, you lack MEDIA attributes to say what devices those stylesheets are FOR. Your for screen layout probably doesn't make a lot of sense on "aural" or "print"... I typically have media="screen,projection,tv" in there to nab the devices and browsers that report that -- right now the W3C is trying to get us to stop targeting "projection" and "tv" even though many Kiosks and devices people are still using will override your screen style or fail to notice just "screen", so when their validation service throws a warning about the latter two, I say "OH WELL". I'd rather have proper cross browser support than worry about a value that to be frank, the HTML specifications have ZERO BUSINESS EVEN DECLARING.

    Since HTML 5 came along I've been butting heads with their undoing some decade and a half of progress that 4 Strict gave us!

    We get in deeper:
    <img src="images/header-top.jpg" class="templatemo-logo" />

    This is probably where your H1 should be, with text inside it. Your image is just presentation, I see no reason for that to be in the markup in a IMG tag. Good rule of thumb, if it's window dressing or an image with text inside it, it doesn't go in a IMG tag! Looking at what you have there, I'd be trying to generate that header with HTML and CSS without images alltogether as, well... CSS has gotten pretty damned powerful of late.

    My equivalent would probably go something like this:
    
    	<div id="info">
    		<h1><a href="/">Celador</a></h1>
    		<div class="his"><span>Viktor</span> Lärare Lingvist</div>
    		<div class="hers"><span>Sara</span> Optiker</div>
    	<!-- #info --></div>
    Code (markup):
    providing MORE than enough hooks to style it much akin to your image -- more so if you get webfonts involved removing the need for a header image altogether.

    Oh, and you're in HTML 5, you can drop the XML /> closure for just >, unless you plan on loading these pages content via a XMLDOM for something like AJAX (a very complex advanced topic) there's no real reason to do that anymore.

    The slideshow -- the part you are having issues with? It's REALLY nice to see someone trying to do it without resorting to JavaScript, so thumbs up on that... but the HTML? COMPLETE GIBBERISH!!!

    When writing HTML it's often important to know what tags are valid inside which other tags and in what order. We refer to this using the similie of a family. An element typically has parents, childrend, grandchildren and so forth.

    ... and in a UL? The only valid "child" is a LI. You CANNOT put input before a LI like that! That's garbage that's going to bite you cross browser.

    While an older reference and focused entirely on HTML 4, I still point people at this as it clearly turns the 4 specification into something us "mere mortals" might have a chance at digesting.

    http://htmlhelp.com/reference/html40/

    If you go to their page for UL and LI and look at the "contents" and "contained in" sections:

    http://htmlhelp.com/reference/html40/lists/ul.html
    Contents - One or more LI elements

    http://htmlhelp.com/reference/html40/lists/li.html
    Contained in - OL, UL, DIR, MENU

    NOT that you have any business using DIR or MENU as the former "no longer exists" and the latter has been repurposed by HTML 5 for Christmas only knows what...

    If you're going to use an HTML element, it helps to know what it MEANS, and what it can and cannot go inside of -- and while HTML 5 has loosened the rules for that browsers haven't caught up, so when possible I suggest sticking to the HTML 4 Strict rules of which tags can go where.

    Back to your page, pretty much a list is "right out" if you want to use this method of a building a slideshow, where you have:

    <ul class="slides">
        	<input type="radio" name="radio-btn" id="img-1" checked />
        		<li class="slide-container">
    			<div class="slide">
    				<img src="images/slideshow/slider1.jpg" />
    			        </div>
    				<div class="slideshownav">
    				<label for="img-6" class="prev">&#x2039;</label>
    				<label for="img-2" class="next">&#x203a;</label>
    				</div>
        				</li>
    Code (markup):
    I would lose the list, swap to a set of nested DIV. It would gut out extra semantics you don't really need, since all that's REALLY there for content is a bunch of images. Likewise I would get rid of the entity characters in the markup and generate those server-side, and since this slideshow method would ONLY work in CSS3, I'd lose most if not all the classes and leverage sibling and child selectors in the CSS instead. (There's a reason I consider "OOCSS" to be dumbass rubbish, and CSSLint to be full of manure!)

    That would go something like this:
    
    	<div id="slideshow">
    		<input type="radio" name="slideRadio" id="slide1" checked>
    		<div>	
    			<img src="images/slides/slide1.jpg" alt="DESCRIBE THIS IMAGE!!!">
    			<label for="slide6"></label>
    			<label for="slide2"></label>
    		</div>
    Code (markup):
    You don't need to waste time in the markup with classes apart from perhaps the very last DIV containing the individual direct label's. Oh and lands sake, if you have a IMG tag, that image should be content, not all users SEE images so you MUST have an ALT attribute on it! DESCRIBE THOSE IMAGES!!!

    If nothing else, it gives google image search something to see which can lead to more peopel finding your site, or even backlinking to it.

    "#slideshow input + div" would point at the div that hold slides. #slideShow img would be all images, "#slideshow input + div label" would be both labels, "#slideshow input + div label + label" would be the second label, and so forth.

    Another common folly is "classes for nothing" - if every tag inside a parent is getting the same class, NONE of them need classes!

    <li class="slideshownav-dots">
          		<label for="img-1" class="slideshownav-dot" id="img-dot-1"></label>
          		<label for="img-2" class="slideshownav-dot" id="img-dot-2"></label>
          		<label for="img-3" class="slideshownav-dot" id="img-dot-3"></label>
          		<label for="img-4" class="slideshownav-dot" id="img-dot-4"></label>
          		<label for="img-5" class="slideshownav-dot" id="img-dot-5"></label>
          		<label for="img-6" class="slideshownav-dot" id="img-dot-6"></label>
        	</li>
    Code (markup):
    NONE of those classes -- or ID's for that matter, are really needed for this.

    IMHO, you don't have enough menu items to be wasting code on bootcraps idiotic "let's use JS to do CSS' job" menu show/hide crap. You have four times -- whoopedy-freaking doo. That's not chewing enough screen space even on the smallest devices to waste this bloat on:

    
    			<div class="navbar templatemo-nav" id="navbar">
    				<div class="navbar-header">		          	
    		          	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    						<span class="sr-only">Toggle navigation</span>
    						<span class="icon-bar"></span>
    						<span class="icon-bar"></span>
    						<span class="icon-bar"></span>
    					</button>
    		        </div>
          			<div class="navbar-collapse collapse">
    			        <ul class="nav nav-justified">
    			          <li class="active"><a href="index.html">Home</a></li>
    	               		  <li><a href="viktor.html">Viktor</a></li>
    			          <li><a href="sara.html">Sara</a></li>
    			          <li><a href="katterna.html">Katterna</a></li>
    			        </ul>
    		      	</div> <!-- nav -->
    	      	</div>
    Code (markup):
    Even IF I had the show/hide menu thing, my markup would just be:
    
    	<input type="checkbox" id="menuCheckbox">
    	<label for="menuCheckbox"></label>
    	<ul id="mainMenu">
    		<li><a href="index.html" class="current">Home</a></li>
    		<li><a href="viktor.html">Viktor</a></li>
    		<li><a href="sara.html">Sara</a></li>
    		<li><a href="katterna.html">Katterna</a></li>
    	</ul>
    Code (markup):
    .. and since I wouldn't waste time with the show/hide menu since it's only four items, I'd just lose that input and label altogether.

    Your content area is where bootcrap is really screwing you -- more so since to be frank it's a single column layout for the flow text and the image gallery has no need of all that nonsense. IF you were an experienced developer, I'd be telling you that if you don't know what's wrong with this:

    <div class="col-xs-6 col-sm-3 col-md-3">
    Code (markup):
    That you shouldn't be making websites -- but you're still learning... Let's just say that such rubbish is why I say that you need to go find a stick to scrape that bootcrap off with.

    Again, you've got H5 and H6 on things that should be a single heading -- likely a H2, HR where there's no actual change in topic (in fact you are BREAKING the use of the heading there), and you have the footer tag around what should probably just be a second P since that CITE is providing MORE than enough semantics without going full retard. (you never go full retard)

    Though you have NO idea how refreshing it is to see someone try using blockquote properly.

    Pretty much where you have this:
    <div class="row" id="thumbnails_container">            
    				<div class="col-md-12">
                        <h6 class="style-frontpage">Bakgrund till namnet</h6><h5 class="style-frontpage">Celador</h5>
    			<hr>
    			<p style="font-size: 18px"> Adapterat efter det <a href="https://en.wikipedia.org/wiki/Cellar_door">"vackraste ordet i engelska språket"</a>, "Cellar door". <a href="https://news.google.com/newspapers?id=a90hAAAAIBAJ&sjid=pqAFAAAAIBAJ&dq=cellar-door+english+word&pg=3537,2682286&hl=sv">Vissa menar</a> att det var Edgar Allan Poe:s favoritord och att i hans kanske mest kända verk "The Raven", så upprepar korpen termen "Nevermore" eftersom det var det ord Poe kunde komma på som lät mest som "cellar door". </p>                    
    			<hr>
    			<blockquote>
    	                        <p>Most English-speaking people ... will admit that <i>cellar door</i> is "beautiful", especially if dissociated from its sense (and from its spelling). More beautiful than, say, <i>sky</i>, and far more beautiful than <i>beautiful</i>. Well then, in Welsh for me cellar doors are extraordinarily frequent, and moving to the higher dimension, the words in which there is pleasure in the contemplation of the association of form and sense are abundant.</p>
    	                        <footer> — 
    				<cite><a href="http://www.nytimes.com/2010/02/14/magazine/14FOB-onlanguage-t.html"><b><i>J.R.R. Tolkien</b></i></a></cite>
    			</blockquote>
    				</div>
    Code (markup):
    You've got presentational classes, the whole thing is NOT the thumbnails container, and you're using the STYLE attribute in a manner that has no business ever being done on a website... You are also doing so to set font-size in pixels, which is accessibility trash. We'll get to that in a bit.

    I'd likely have this:

    
    	<div id="content">
    		<div class="subSection">
    			<h2>
    				<span>Bakgrund till namnet</span>
    				Celador
    			</h2>
    			<p>
    				Adapterat efter det <a href="https://en.wikipedia.org/wiki/Cellar_door">"vackraste ordet i engelska språket"</a>, "Cellar door". <a href="https://news.google.com/newspapers?id=a90hAAAAIBAJ&sjid=pqAFAAAAIBAJ&dq=cellar-door+english+word&pg=3537,2682286&hl=sv">Vissa menar</a> att det var Edgar Allan Poe:s favoritord och att i hans kanske mest kända verk "The Raven", så upprepar korpen termen "Nevermore" eftersom det var det ord Poe kunde komma på som lät mest som "cellar door".
    			</p>
    		<!-- .subSection --></div>
    
    		<blockquote lang="en">
    			<p>
    				Most English-speaking people ... will admit that <em>cellar door</em> is "beautiful", especially if dissociated from its sense (and from its spelling). More beautiful than, say, <em>sky</em>, and far more beautiful than <em>beautiful</em>. Well then, in Welsh for me cellar doors are extraordinarily frequent, and moving to the higher dimension, the words in which there is pleasure in the contemplation of the association of form and sense are abundant.
    			</p><p>
    				--<cite>
    					<a href="http://www.nytimes.com/2010/02/14/magazine/14FOB-onlanguage-t.html">
    						J.R.R. Tolkien
    					</a>
    				</cite>
    			</p>
    		</blockquote>
    
    		<hr>
    Code (markup):
    That final HR to say that the images that follow are not a subsection of that H2 -- the blockquote quite clearly is so a HR there would make no sense. I add a .subSection class just because you want those lines drawn at the bottom. A line on the screen is presentation, using a DIV means that there MAY be style, but we're not saying what that style IS.

    The thumbnails section has both images and text, that's when I resort to a list. If nothing else the extra tags give us hooks to get fancy on the formatting side. That would go something like this:

    
    		<ul class="gallery">
    			<li>
    				<a href="images/home/bild1.jpg">
    					<img
    						src="images/home/bild1@thumb.jpg"
    						alt="<3"
    					>
    					&lt;3
    				</a>
    			</li><li>
    				<a href="images/home/bild2.jpg">
    					<img
    						src="images/home/bild2@thumb.jpg"
    						alt="Caketopper"
    					> Familjen Celador
    				</a>
    			</li><li>
    
    Code (markup):
    ... and so forth through all those thumbs. I like to try and maintain a "rule of 76" in my code for clarity, where if a line of code (not content like flow text) gets excessively long (more than 76 characters) I start adding carriage returns and tabs. I'm all about minimalism, but despite what some of the "byte obsessed" nutters will tell you, a few extra whitespace characters are NOT going to break the bank if your code is worth a damn.

    I love how people who use three times the markup I do for a task will then go after me for leaving whitespace in. HERPAFREAKINGDERP!

    Your page footer also being separate just needs a HR before it, removing the need for the footer tag (again, those pointless redundancies you'll hear me talk about at great length). Really you only need a few div, and NONE of those start new "subsections" of the page so there's no reason for there to be heading tags in there. So where you have:

    <!-- nedan: footer -->
    		<footer class="container">
    			<div class="credit row">
    				<div class="col-md-6 col-md-offset-3">
    					<div id="templatemo_footer">
    						Denna hemsida är en produkt av<h3> VIKTOR CELADOR</h3>
    					</div>
    				</div>
    				<div class="col-md-3">
    
    						<br>
                            			<h6 class="style-headline"><span style="font-family:Times, Verdana;font-size:20px">&#9993 </span><a rel="nofollow" href="mailto:viktor@celador.se" target="_parent">Viktor@Celador.Se</h6></a>
    						<p><h6 class="style-headline"><span style="font-family:Times, Verdana;font-size:20px"> &#x260E;</span> 0707-18 49 50 </h6> 
    					
    
    					</div>
    				</div>				
    			</div>
    		</footer>
    	</div>
    </body>
    </html>
    Code (markup):
    I would have:

    
    	<div id="footer">
    		<div>
    			<a href="mailto:viktor@celador.se" rel="nofollow" class="mail">
    				Viktor@Celador.Se
    			</a><br>
    			<span class="phone">0707-18 49 50</span>
    		</div>
    		Denna hemsida är en produkt av <b>Viktor Celador</b>
    	<!-- #footer --></div>
    Code (markup):
    I'm out the door for a couple hours, but when I get back I'll write up a fully working rewrite of just your home page -- then document it so you can learn the how/what/why of the choices I make.

    For now if you've slogged through the brick that is the articles I linked to above and this post, have a look at this article:
    http://www.cutcodedown.com/article/progressive_enhancement

    ... as it outlines the process I will be following for reconstructing your site.
     
    deathshadow, Jan 16, 2016 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Oh, for now, here's a .txt file containing the markup before I start styling it -- I don't think I'll need to add much to it for style as at this point I'm pretty good at guessing ahead of time:
    http://www.cutcodedown.com/for_others/celador/template.txt

    When I have the layout done (probably start in on it around 6pm EST, so complete by 6:30, 7 at the latest) I'll put it up live, with a .rar of the whole thing, then dive into explaining the how/what/why of the code. (which usually takes longer than creating the style/layout). Again it's a fairly simple site -- once you get good at HTML and CSS a base template for something like that homepage should be a 30 to 40 minute job.

    ... well, unless you start dicking around with getting artsy :p

    Oh, and your content made me chuckle as it reminds me of an old Jazz producer talking about how music styles come back periodically.

    "It's like in the old cartoons where a cellar door would open, and out would come all these horns playing "Muskrat Ramble"; playing Jazz... and the young person goes "What is this? This is wonderful!" -- It's Jazz. "How long has this been around?" -- forever! -- "Well why have I never heard of it?"

    It's because the cellar door just opened.
     
    deathshadow, Jan 16, 2016 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Actually, looks like I've got a 20 to 30 minute window opening up, so I'm starting in on the CSS now. I just went through and optimized all the images.

    In your original you were using the full size images for EVERYTHING, and that is most of what made the site painful to watch load. High resolution images are nice and all, but you don't use a 1200x1200 image when the largest it would be shown as is 400x400 (and it would take something absurd like a kindle fire HXD to do that)

    As with all my examples the directory:
    http://www.cutcodedown.com/for_others/celador/

    Is wide open so you can see the files being used. The HTML that's in there right now is identical to the .txt file, showing what the page does (And should do) when CSS is not present (for now, that will change). Again that "progressive enhancement" article I liked to above talks about that -- you start with the content, mark it up semantically so that it has MEANING so that non CSS non-screen "user agents" (software trying to access the content and convey it to users) have something to work with, THEN you enhance it with CSS.

    Basically a browser is always a user-agent but a user-agent isn't always a browser. Screen readers (programs that read pages aloud to you), braille readers, search engines -- all forms of non-visual UA's.

    ... and actually, ok. Done... well, I didn't get the footer icons, but it's close enough.

    http://www.cutcodedown.com/for_others/celador/templateCSS.html

    Again directory is open, there's a .rar in there for you containing all the files.
    http://www.cutcodedown.com/for_others/celador/

    Business lunch so I'm out the door, but tonight I'll write up a breakdown of the how/what/why of what I did there. I took more than a few stylistic liberties and made some wild guesses -- even did some things I personally wouldn't put on a "real" website -- but figured I'd toss in some more advanced techniques to help bring you up to speed quicker.

    Biggest change is the responsive re-arrangement of the slider's controls to "fingertip sized" targets on mobile. Takes more space, but is actually usable there. Common touch displays don't have hover states, so the responsive part of the design MUST adapt to that -- without that change someone on mobile wouldn't know how to select slides! Much less the little circles would be too small to tap.

    I may have gotten too fancy on the 8 thumbs below, I actually used your site as a learning example for myself -- just to see what CSS3 can really do. I've been programming for nearly 4 decades now, and there's one lesson that stands out above the rest; the day you stop learning is the day the world leaves you behind.

    Hoping this helps, I know I'm basically steamrollering you with text here... I'll have more for you in 7 or 8 hours.
     
    deathshadow, Jan 16, 2016 IP
  5. KangBroke

    KangBroke Notable Member

    Messages:
    1,026
    Likes Received:
    59
    Best Answers:
    4
    Trophy Points:
    265
    #5

    I wonder when DP is going to upgrade your account? You should by now be an admin the way you break things down to people. I considered responding to this one before you did. But he had so many errors I just didn't know where to start. We need more people like you on DP. I don't mind when your 'harsh' I feel the same way at time explaining things to users, and im not on your level yet.

    This was explained and resolved very professionally. Kudos to you
     
    KangBroke, Jan 16, 2016 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Oh, might be a bit longer on the code breakdowns -- and apologies if my directory system on the server goes a bit wonky, making major revisions to that to drag it up in appearance to the same as the site itself.
     
    deathshadow, Jan 16, 2016 IP