Problems with order in responsive design

HTML & CSS
1

I would be grateful for any help anyone has to offer. A friend’s wife has a website on Wix but I am trying to recreate an approximation of it with a view to him taking over further development of it. There is some responsive behaviour on one page that I am trying to emulate (other pages do similar so I want to try and nail the underlying principle).

I have 14 <article>s, some of which contain several <p>s of text, some of which contain images.

In mobile I want the <article>s to be in a specific order, in a column. In desktop I want the text articles to be in the middle of three columns with the remaining images split between a column on the left and a column oon the right.

I started with the mobile layout. I made a container, called <section class="outdoorSection"> inside which the 14 child <article>s. The <section class="outdoorSection"> is styled as display: flex; and flex-direction: column;. The articles are in the order in which I want to use them for desktop.

I have then used a series of lines of CSS (lines 163 - 176) that alter the order of the child articles (the lines are eg section.outdoorSection > article:nth-child(11) {order: 1;}:

To then try and change it to the desktop layout I added a media query to change <section class="outdoorSection"> to display: grid; and grid-template-columns: 2fr 4fr 2fr;. Now this is where the trouble started. I had to group the 14 articles into three <div>s in order to insert one <div> into each column. But this then meant that the 14 section.outdoorSection > article:nth-child(11) {order: 1;} statements where no longer correct. So I altered them to, eg, section.outdoorSection > div.text > article:nth-child(8) {order: 1;} - see lines 168 - 181 here:

Now I know that these lines correctly identify the <article>s because I added some {border: solid 1px red;} type declarations to some of them. But the order displayed in mobile did not change to the desired order - they just displayed in the order in which they were written in the html. I think this is because of the <div> tags that I had added which meant that the 14 s were no longer children of the ``` container.

Is there anything I can do about this without getting involved with javascript? I can’t help wondering if I have overcomplicated matters. If it cannot be achieved in pure HTML and CSS I wonder if javascript could be used to remove add the three <div>s in desktop?

Thank you to anyone who has read this far. I have had some outstanding help from PaulOB in the last few weeks so am hopeful of some sage advice from him or anyone else. Thank you.

2

Yes that’s correct. The order property only applies to direct children of a grid or flex container. That means only the main divs of .text, .pics1 and .pics2 could be reordered (essentially the whole columns). You could re-order the items in the columns if you applied a display:flex to pics1, pics2 and .text but you could not intermingle children from three separate parents.

There is a new property called display:contents which could be applied to pics1, pics2 and .text which treats that parent as though it was not in the DOM and would allow for re-ordering but unfortunately its still under development and not implemented properly yet so can’t be used in production.

Note that generally something like this is not viable in production.

section.outdoorSection > div.text > article:nth-child(8) {order: 1;}
section.outdoorSection > div.pics2 > article:nth-child(2) {order: 2;}  
section.outdoorSection > div.text > article:nth-child(2) {order: 3;}
section.outdoorSection > div.pics1 > article:nth-child(1) {order: 4;}  
section.outdoorSection > div.text > article:nth-child(5) {order: 5;} 
section.outdoorSection > div.text > article:nth-child(3) {order: 6;} 
section.outdoorSection > div.pics2 > article:nth-child(1) {order: 7;} 
section.outdoorSection > div.text > article:nth-child(4) {order: 8;}  
section.outdoorSection > div.text > article:nth-child(7) {order: 9;} 
section.outdoorSection > div.pics2 > article:nth-child(3) {order: 10;}
section.outdoorSection > div.text > article:nth-child(1) {order: 11;} 
section.outdoorSection > div.pics1 > article:nth-child(2) {order: 12;} 
section.outdoorSection > div.pics1 > article:nth-child(3) {order: 13;} 
section.outdoorSection > div.text > article:nth-child(6) {order: 14;}

That’s fine for a demo but not for a real world application as you have made the CSS specific to the html. What happens when there are more articles than you expect or an extra element is added into the mix? There can also be accessibility issues in moving vast quantities of content around the page unless the html is in the correct structure to start with.

“Authors must not use order or the *-reverse values of flex-flow/flex-direction as a substitute for correct source ordering, as that can ruin the accessibility of the document.”

If you can explain exactly how the desktop is supposed to look and how the mobile is supposed to look then we can look at the best way to accomplish this if at all possible. I looked at your codepen but couldn’t really fathom the logic between the images and the text content?

Are the images related to specific passages of text? i.e. do images and a text passage go together?

In desktop do you simply want random images down the left and right side of the page and the text articles down the centre column only.

In Mobile I understand you want just one column but how do the pictures fit in with each passage of text content.? Or does it go text block then image and so on?

Do the text blocks change order also or are they always in the order of the source html?

If you can clarify so that I can understand better then I’ll be able to offer better advice as to whether it can be achieved in css or not. My gut feeling is that you are attempting something that is not really possible but it may be that we can simplify the structure somehow to achieve what you want.

Lastly be careful of throwing 100% min-heights around as that means your container is a minimum of 100% tall but as it starts after the header you have immediately made the page too long for any viewport whether it needs to be or not. i.e. the header is 100px or so tall and now you add a 100% high element that will make it go below the fold by 100p. As you can see in your example that gives a large gap at the bottom of your content that looks awkward.

I’m finished for the day now but will be back tomorrow if you can clarify the above and I will take another look. I always like a challenge :slight_smile:

2 Likes
3

Wow again - thank you!

I had an inkling that maybe I was straying from best practice in terms of HTML being for semantics and CSS for layout.

There are six images and eight pieces of text. Each image relates to one piece of text, so two of the pieces of text are not related to any image.

The order of the items of text is not important.

In mobile I would want each image to be below the text that relates to it. I would want a reasonable spread of images. But the overall order is otherwise not important.

In desktop there is no need for any relationship between any of the images and the text. Just three images on each side, for “decoration”.

The page that I am mimicking is here:

https://www.sticksandstonesoutdoors.co.uk/outdoor-learning-sessions - the mobile version does not appear on a simple narrow desktop screen, I have to look on my actual phone. I didn’t make the original site so can claim innocence of the lack of coherence between the intentions behind desktop and mobile. It is made in Wix and crtl-u just shows lots of .js.

I hope I have explained everything OK.

Thank you again for your time and effort.

re the 100% height - I thought it would make the element 100% of it’s container height?

Thank you.

1 Like
4

I’m looking at your page now to see if there is an easier method but firstly I’d like to show you how the real page looks on Firefox:

Screen Shot 2021-01-09 at 11.43.59
Screen Shot 2021-01-09 at 11.43.591058×1203 659 KB

As you can see the page does not display properly in Firefox and there are gaps between the images and the content. That wix page is incredibly complicated and uses far too much script and code to achieve the effect which indeed fails in Firefox due to its complexity and flawed approach.
Matters are compounded if I increase text size (as I need to do to read comfortably) and the whole thing blows up.

Screen Shot 2021-01-09 at 11.53.44
Screen Shot 2021-01-09 at 11.53.441192×1195 652 KB

Screen Shot 2021-01-09 at 11.54.43
Screen Shot 2021-01-09 at 11.54.431192×645 291 KB

They are also running a mobile detection script and changing the code dynamically for mobile which is why desktop is not responsive. That also means that I can’t resize the window to an optimal fit on my monitor as the content does not adapt. All in all its a flawed approach and one that I would not wish to replicate.

I only mention the above points so that you don’t get lost in the design aspect of things as in some ways that is of less importance than the usability and accessibility of a design.

The wix page does a lot of things with scripts to resize the images in place but basically places the images individually into grid positions as required. There is nothing automatic about it and cannot handle different set ups without recoding the page to suit. In essence you could achieve the same thing by putting your content in the middle of the page and absolutely placing those 6 images into the positions they need to be. As there is no responsiveness to the page (it is a fixed width) there is no flow to maintain but you do have to work out the exact positions of each image. That could indeed be a last resort if no other suitable method cannot be found and that you must have the original design (although as I mention that design is broken in some browsers anyway).

I will have a play around with the design this afternoon and see if I can find a more reliable method or if not offer an alternative.

Yes that will make the container 100% the height of its parent container assuming the parent container also has a height defined. As the parent is the body element which you have given a 100% height to then the container will be 100% the height of the body element. However as your container starts a third of the way down the page it will then travel another 100% making it go below the bottom of the viewport. That means there will l likely be a large bit of space at the bottom of the element in some cases when not needed.

If you intended the container to just go to the bottom of the viewport (when content isn’t tall enough) then its height would have needed to be 100% minus the height of the header. That is obviously a magic number calculation that should be avoided wherever possible (sometimes you can’t avoid it but in most cases there is another solution). Instead you would have needed to contain the header and the main section in a page-wrapper that has the min-height:100vh (vh stands for viewport height and avoids having an unbroken chain of 100% heights back to root). Then using flex you could stretch main content to the bottom automatically.

2 Likes
5

Wow again! Again, thank you for the time and effort you are putting into this.
I was aware of the Firefox issue and in a peverse way I felt that this justified my dislike of the approach that Wix took.

Thank you for your patient explanation re 100% heights.

Are you a professional in an IT or design type field? Or a knowledgeable and keen amateur?

6

Yes those site builders are complex beasts but they do fulfil a specific criteria so we shouldn’t be too harsh on them. The problem though is the bloat needed in order to achieve designs for everyone and their reliance on jS to fit everything.

I’m wondering perhaps whether it might be easier to hide those image on desktop and display them as background images down the sides? It all depends on how this site is to be managed and whether you will be changing content and images regularly. The wix site manually places all the images into the grid positions so that one can’t be changed without going back into the sitebuilder anyway I assume (unless they have some script in place to handle dynamic content)

As I said in the previous post you could simply absolutely place those image to the sides into their correct positions but I’m not a fan of that unless there is no other way to do it automatically.

Another option would be to duplicate the images in the html and then just hide/show as required. That would allow an easy 3 column layout method which can turn into one column by just hiding the 2 side columns and turning back on the images in the middle column. Again I’m not a fan of duplicating code but as it is just an image it will already be cached and is not like duplicate text content.

I’ve been coding sites for clients for about 20 years on a freelance basis but strictly just front end html/css. I was usually employed by design agencies to produce templates that they could then take over and code the backend. I was coding about 5 PSDs a week at the height of the boom and usually turned around a front page and a few cover pages in less than a day. However I have also worked on one or two large sites that have taken years to complete.

I also co authored one of the first books on CSS about 13 years ago. Mind you things were a lot easier in some respects then as we didn’t have as much to work with (although browser differences were the bane of our lives especially IE6). I’m retired now though and just do this for a hobby thankfully .:slight_smile:

2 Likes
7

I think I will adopt this approach. Thank you.

Shame - I’m guessing it will be a little out of date now! If you write another I will buy it!

Thank you again for your help.

2 Likes
8

I’ve looked at your page and I can’t see an easy way to do what you want. The simplest way is to absolutely place those images to the side. This means that the mobile version should be in the html order that you want it to be displayed (which should be the logical order anyway).

<div class="wrap">
  <header>
    <picture>
      <source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/logo.webp" />
      <img src="https://danieljeffery.co.uk/sheena/images/logo.jpg" alt="logo" height="100" class="logo" />
    </picture>

  </header>
  <main class="container">

    <h1>
      Outdoor Learning Sessions
    </h1>
    <section class="outdoorSection">

      <article class="img" id="img1">
        <picture class="outdoorPicture">
          <source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/outdoor3.webp" />
          <img src="https://danieljeffery.co.uk/sheena/images/outdoor3.jpg" alt="girl in tree" class="outdoorImage" />
        </picture>
      </article>

      <article>
        <h2 class="teacherSubTitle">What does a tree do?</h2>
        <p class="teachersText">Examine what the different parts of a tree actually do and consider how important they are to us and the world we live in. Includes tree measuring and exploring carbon lockup.</p>
      </article>

      <article>
        <h2 class="teacherSubTitle">Minibeast Discovery</h2>
        <p class="teachersText">Discover what minibeasts are lurking in your school grounds. A minibeast hunt combined with themed games and activities will gain an insight into the fascinating world of invertebrates.</p>
      </article>
      <article class="img" id="img2">
        <picture class="outdoorPicture">
          <source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/outdoor1.webp" />
          <img src="https://danieljeffery.co.uk/sheena/images/outdoor1.jpg" alt="child with insect" class="outdoorImage">
        </picture>
      </article>

      <article>
        <h2 class="teacherSubTitle">How the Water Works</h2>
        <p class="teachersText">Explore how the water cycle works in nature and how our usage impacts on nature. </p>
      </article>
      <article>
        <h2 class="teacherSubTitle">Sensory Exploration</h2>
        <p class="teachersText">Develop a connection to the natural world through a multitude of senses. Develop improved wellbeing, physical literacy and emotional intelligence by exploring nature.</p>
      </article>

      <article class="img" id="img3">
        <picture class="outdoorPicture">
          <source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/outdoor3.webp" />
          <img src="https://danieljeffery.co.uk/sheena/images/outdoor3.jpg" alt="boy hugging a tree" class="outdoorImage" />
        </picture>
      </article>

      <article>
        <h2 class="teacherSubTitle">Food Chains</h2>
        <p class="teachersText">Do you know what eats what in the British woodland environment? Introduction to simple food chains and what they are comprised of. Develop understanding of how energy flows through the eco system and what happens when humans impact on it.</p>
      </article>

      <article>
        <h2 class="teacherSubTitle">Natural Art</h2>
        <p class="teachersText">Let their creativity flow using the natural environment as inspiration. We will explore nature’s colours, textures and shapes before the group work to create their own masterpieces</p>
      </article>

      <article class="img" id="img4">
        <picture class="outdoorPicture">
          <source type="https://danieljeffery.co.uk/sheena/image/webp" srcset="images/outdoor6.webp" />
          <img src="https://danieljeffery.co.uk/sheena/images/outdoor6.jpg" alt="boy in tree" class="outdoorImage" />
        </picture>
      </article>

      <article>
        <h2 class="teacherSubTitle">Literacy in the Environment</h2>
        <p class="teachersText">Literacy lessons don’t have to happen indoors. Use nature to inspire simple poetry and storytelling. We will play with words and get creative with language whilst enjoying being in the outdoors.</p>
      </article>

      <article class="img" id="img5">
        <picture class="outdoorPicture">
          <source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/outdoor2.webp" />
          <img src="https://danieljeffery.co.uk/sheena/outdoor2.jpg" alt="children playing in woods" class="outdoorImage" />
        </picture>
      </article>

      <article>
        <h2 class="teacherSubTitle">Bespoke Sessions</h2>
        <p class="teachersText">Not sure how to link a topic to outdoor learning? We are always up for a challenge, so get in touch!</p>
      </article>

      <article class="img" id="img6">
        <picture class="outdoorPicture">
          <source type="https://danieljeffery.co.uk/sheena/image/webp" srcset="images/outdoor5.webp" />
          <img src="https://danieljeffery.co.uk/sheena/images/outdoor5.jpg" alt="child in fallen leaves" class="outdoorImage" />
        </picture>
      </article>

    </section>

  </main>
</div><div class="wrap">
  <header>
    <picture>
      <source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/logo.webp" />
      <img src="https://danieljeffery.co.uk/sheena/images/logo.jpg" alt="logo" height="100" class="logo" />
    </picture>

  </header>
  <main class="container">

    <h1>
      Outdoor Learning Sessions
    </h1>
    <section class="outdoorSection">

      <article class="img" id="img1">
        <picture class="outdoorPicture">
          <source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/outdoor3.webp" />
          <img src="https://danieljeffery.co.uk/sheena/images/outdoor3.jpg" alt="girl in tree" class="outdoorImage" />
        </picture>
      </article>

      <article>
        <h2 class="teacherSubTitle">What does a tree do?</h2>
        <p class="teachersText">Examine what the different parts of a tree actually do and consider how important they are to us and the world we live in. Includes tree measuring and exploring carbon lockup.</p>
      </article>

      <article>
        <h2 class="teacherSubTitle">Minibeast Discovery</h2>
        <p class="teachersText">Discover what minibeasts are lurking in your school grounds. A minibeast hunt combined with themed games and activities will gain an insight into the fascinating world of invertebrates.</p>
      </article>
      <article class="img" id="img2">
        <picture class="outdoorPicture">
          <source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/outdoor1.webp" />
          <img src="https://danieljeffery.co.uk/sheena/images/outdoor1.jpg" alt="child with insect" class="outdoorImage">
        </picture>
      </article>

      <article>
        <h2 class="teacherSubTitle">How the Water Works</h2>
        <p class="teachersText">Explore how the water cycle works in nature and how our usage impacts on nature. </p>
      </article>
      <article>
        <h2 class="teacherSubTitle">Sensory Exploration</h2>
        <p class="teachersText">Develop a connection to the natural world through a multitude of senses. Develop improved wellbeing, physical literacy and emotional intelligence by exploring nature.</p>
      </article>

      <article class="img" id="img3">
        <picture class="outdoorPicture">
          <source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/outdoor3.webp" />
          <img src="https://danieljeffery.co.uk/sheena/images/outdoor3.jpg" alt="boy hugging a tree" class="outdoorImage" />
        </picture>
      </article>

      <article>
        <h2 class="teacherSubTitle">Food Chains</h2>
        <p class="teachersText">Do you know what eats what in the British woodland environment? Introduction to simple food chains and what they are comprised of. Develop understanding of how energy flows through the eco system and what happens when humans impact on it.</p>
      </article>

      <article>
        <h2 class="teacherSubTitle">Natural Art</h2>
        <p class="teachersText">Let their creativity flow using the natural environment as inspiration. We will explore nature’s colours, textures and shapes before the group work to create their own masterpieces</p>
      </article>

      <article class="img" id="img4">
        <picture class="outdoorPicture">
          <source type="https://danieljeffery.co.uk/sheena/image/webp" srcset="images/outdoor6.webp" />
          <img src="https://danieljeffery.co.uk/sheena/images/outdoor6.jpg" alt="boy in tree" class="outdoorImage" />
        </picture>
      </article>

      <article>
        <h2 class="teacherSubTitle">Literacy in the Environment</h2>
        <p class="teachersText">Literacy lessons don’t have to happen indoors. Use nature to inspire simple poetry and storytelling. We will play with words and get creative with language whilst enjoying being in the outdoors.</p>
      </article>

      <article class="img" id="img5">
        <picture class="outdoorPicture">
          <source type="image/webp" srcset="https://danieljeffery.co.uk/sheena/images/outdoor2.webp" />
          <img src="https://danieljeffery.co.uk/sheena/outdoor2.jpg" alt="children playing in woods" class="outdoorImage" />
        </picture>
      </article>

      <article>
        <h2 class="teacherSubTitle">Bespoke Sessions</h2>
        <p class="teachersText">Not sure how to link a topic to outdoor learning? We are always up for a challenge, so get in touch!</p>
      </article>

      <article class="img" id="img6">
        <picture class="outdoorPicture">
          <source type="https://danieljeffery.co.uk/sheena/image/webp" srcset="images/outdoor5.webp" />
          <img src="https://danieljeffery.co.uk/sheena/images/outdoor5.jpg" alt="child in fallen leaves" class="outdoorImage" />
        </picture>
      </article>

    </section>

  </main>
</div>

/* Override browser defaults 
* {
      padding: 0px;
      border: 0px;
      margin: 0px;
      box-sizing: border-box;
  }

Please don't do this as it breaks a lot of form elements and is not the nest way to go about it. Just reset the margins and padding on the elements you use instead.

Box-sizing needs t be specified differently anyway to catch all occurnces.
*/

/*To remove the horrid black border in Chrome when an input acquires focus 
*,*:focus,*:hover{
    outline:none;
}
Please don;t do this as you kill keyboard accessibility straight away. 

If you use the above then make sure you add an appropriate focus state that fits in with the design
*/
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}
h1,
h2,
p {
  margin: 1rem 0;
}

article h1 {
  font-size: 2rem;
}
h1{text-align:center;}

img,
source {
  display: block;
}

/* Define variables to be used for colours*/
:root {
  --headlineColor: #ca6;
  --textColor: #094;
  --backgroundColor: #ffe;
  --otherColor: #ce6;
  --otherColor2: #fa5;
}

/* ios doesn't like background-attachment:fixed so we use positoin fixed instead on a pseudo element instead */
body:before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: url("https://www.danieljeffery.co.uk/sheena/images/background3.jpg")
    no-repeat 50%;
  background-size: cover;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Chelsea Market", cursive;
  color: var(--headlineColor);
  padding: 5px;
  margin: 5px;
}

p,
address,
span,
ul,
li,
dl,
dt,
dd {
  font-family: "Chelsea Market", cursive;
  color: var(--textColor);
  font-size: 1.2rem;
  padding: 5px;
  margin: 5px;
}

dt {
  color: var(--headlineColor);
  margin: 0 0 0 30px;
}

li {
  padding: 0;
  margin: 0 0 0 60px;
}

header {
  margin: 3px;
  display: flex;
}
header picture {
  margin: auto;
}

.footer {
  font-size: small;
}

footer.container {
  display: flex;
  flex-direction: column;
  border-radius: 4px 4px 0px 0px;
}

.socialMedia {
  color: var(--headlineColor);
}

a:link,
a:visited {
  color: var(--headlineColor);
  text-decoration: none;
}

a:hover {
  color: var(--textColor);
}

.logo {
  border: solid 1px var(--headlineColor);
}
.wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 1280px;
  margin: auto;
  justify-content: center;
}
.container {
  background-color: var(--backgroundColor);
  border-radius: 4px;
  flex: 1 0 0%;
}

.teacherSubTitle {
  color: var(--otherColor);
  padding: 0px;
  margin: 1rem 20px 0 20px;
}

.teachersText {
  padding: 0 20px 10px 20px;
  margin: 0px;
}
.outdoorPicture,
.outdoorPicture img {
  max-width: 280px;
  height: auto;
  width: 100%;
  margin: auto;
}

/* *** Tablet and desktop *** */
@media screen and (min-width: 768px) {
  p,
  th,
  td,
  input,
  select,
  pre,
  span,
  ul,
  li,
  dl,
  dt,
  dd {
    font-size: 1rem;
  }

  .container {
    padding: 0 150px;
    position: relative;
    margin: 0 10px;
  }
  .img img,
  .img picture {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    padding: 0;
  }
  #img1,
  #img2,
  #img3,
  #img4,
  #img5,
  #img6 {
    position: absolute;
    left: 0;
    top: 0;
    width: 150px;
    height: 33.333%;
  }
  #img2,
  #img5 {
    top: 33.333%;
  }
  #img3,
  #img6 {
    top: 66.666%;
  }
  #img4,
  #img5,
  #img6 {
    left: auto;
    right: 0;
  }

  footer.container {
    flex-direction: row;
  }

  header {
    align-items: flex-end;
  }
  header picture {
  margin:0 auto 0 0;
}
}

@media screen and (min-width: 992px) {
  .container {
    padding: 0 250px;
    position: relative;
  }

  #img1,
  #img2,
  #img3,
  #img4,
  #img5,
  #img6 {
    width: 225px;
  }
}

Desktop View:

Screen Shot 2021-01-09 at 16.03.07
Screen Shot 2021-01-09 at 16.03.071305×1029 495 KB

Smaller screen View:

Screen Shot 2021-01-09 at 16.05.16
Screen Shot 2021-01-09 at 16.05.16417×897 133 KB

Bear in mind I have not error checked the code yet or fine tuned it as there is a lot of your stuff in there I would re-organise and tidy up :slight_smile:

Be careful when you globally style elements like p, h1, h2, ul, li, article, picture, div etc with specific styles (other than margin and padding) because you end up styling all those instances which will affect them sitewide including third party add ons etc. It is better to add a class to them and avoid any issues later.

I notice you used IDs beginning with a number and although this is now valid in html5 it is not valid in CSS so you can’t use those IDs as hooks for styling although they may be useful for JS.

Lastly I would suggest rather than copying the Wix site you re-design it into something more usable and automatic especially if you want your client to manage it. There are plenty of nice designs around you can copy or modify but generally the simpler the better.

Hope its of some use anyway and sorry for being so long winded.:slight_smile:

Yes its well out of date now but the basics of it are sound. These days you really need to be learning flex and grid at the same time as learning the basics which is why its harder these days as there is a lot more to learn.

9

Thank you for reminding me about that.

1 Like
10

Wow again!. Thank you. Am reading through this now. Thank you for the free lesson.

1 Like
11

Ha ha, You are welcome. :slight_smile: Hope it didn’t sound like a lesson though :wink:

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.