Hello everybody. I had a task to make the site header adaptive, but the problem is that the adaptive structure of the elements changes dramatically. I drew in the picture as it is on the desktop and how to position the elements on the tablet version. At the moment, I just copied the block with the main menu in the code and display it only on the tablet, but the trouble is that the same main menu appears twice in the code and the search engines do not approve it, but it’s important for me to sit in the search engines. Can you imagine how you would solve this problem without duplicating the code?

The layout of the elements

  • Greetings. On this site they help to understand any problem, but not to solve it for you. Put your work out and figure it out. - meine
  • Read about the grid grid. With it, you can solve everything without duplicating the code. Article on HabrĂ© - Alexey
  • My header code lay out? I am not asking you to decide for me, I asked for ideas on how this could be solved. Now I just made a separate block in the code, in which there is both the main menu and a search inside one line and I output it on the tablets, but in this situation I have duplicated the code. I want to understand whether it is possible to do without duplicating the code. - user1362765 2:23 pm
  • Thanks, I think about grids, but I’m very afraid for those browsers that do not support the grid, the percentage of such is still sufficient. - user1362765 2:24 pm
  • There is no other way. Use JS to transfer elements even worse. Here two options are duplication of code, and the second is grids. - Aleksey

1 answer 1

I offer grid ... the only tool that can be easily manipulated ...

.item-a{background:red;} .item-b{background:green;} .item-c{background:blue;} .item-d{background:yellow;} .item-e{background:pink;} .item-f{background:gray;} .item-a{grid-area:a-side; /*logo*/ } .item-b{grid-area:b-side; /*city*/ } .item-c{grid-area:c-side; /*phone*/ } .item-d{grid-area:d-side; /*search*/} .item-e{grid-area:e-side; /*basket*/} .item-f{grid-area:f-side; /*menu*/ } .items{ display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-column-gap:20px; grid-row-gap:20px; grid-template-areas: "a-side b-side c-side" "a-side d-side e-side" "f-side f-side f-side"; } @media (max-width:1024px){ .items{ grid-template-columns:1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "a-side c-side c-side" "a-side b-side e-side" "f-side f-side d-side"; } } 
  <div class="items"> <div class="item-a">logo</div> <div class="item-b">city</div> <div class="item-c">phone</div> <div class="item-d">search to site</div> <div class="item-e">basket</div> <div class="item-f">main menu</div> </div>