1

I have to follow a sketch of the main webpage of a website I'm building. The main page is essentially blocks rendered as rows, but one row is divided in 4 blocks that are not of the same height (so I can't simply use display: inline-block; or float: left).

On the desktop version, the way the blocks are displayed is that way:

[div1]  [div2]
[div3]  [div4]

which gives the following HTML structure :

 <div class="row">
    <div class="column">
        <div class="block">[div1]</div>
        <div class="block">[div3]</div>
    </div>
    <div class="column">
        <div class="block">[div2]</div>
        <div class="block">[div4]</div>
    </div>
</div>

NB: the height of the columns and blocks are not necessarily equal; all blocks have same width which is roughly the width of the column - paddings.

But, on the mobile version, the way the blocks are displayed is that way :

[div1]
[div2]
[div3]
[div4]

Which gives the following HTML structure:

<div class="row">
    <div class="block">[div1]</div>
    <div class="block">[div2]</div>
    <div class="block">[div3]</div>
    <div class="block">[div4]</div>
</div>

The solution I currently use is to create both rows but with one disappearing, depending on the viewport width.

Is there a better way to apply both displays (which is not based on a barely supported CSS/HTML feature) for both viewports without duplicating the content for SEO reasons ?

I'm working on Magento CMS, so, in order to avoid adding too many libraries, if the solution is to use JavaScript, is there a tool Magento provides in its existing libraries or a simple way (not just "listening to window resize event" dubious method ...) to manage dynamic viewport changes so I can move the blocks dynamically ?

If the solution is by using JavaScript, how would this solution be fitted for users/browsers which don't use javascript ?

  • It's not duplicate content if your duplicate an element... repeated content, or elements are not duplicate, and keyword stuffing doesn't exist like it used too. You can safely use display none for mobile, and vice versa... or rather than using a band aid, you could actually address the issue... Your CSS, use media queries. Duplicate content is when a entire page is duplicate from one URL to another, internally or externally. – Simon Hayter Apr 18 '16 at 17:31
  • @SimonHayter The problem is I can't address the issue with the people in charge... "if it's that way, you do it that way" kind of obligation. Well, my bad for misusing "duplicate content". I was asking this in case of much more parts of the website that would have to be that way. Is it still correct to make those parts disappear on one device and appear on another ? thanks for replying though – Strannch Apr 19 '16 at 8:42
  • It's common to see elements repeated twice if they use display: none using media queries, i.e one for desktop, one for mobile devices. It's not something I recommend because of code bloat and administration purposes, but if you have no choice then you can go ahead. – Simon Hayter Apr 19 '16 at 8:50
  • @SimonHayter ok then, thanks ! You could post this so I validate your answer :) – Strannch Apr 19 '16 at 11:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.