Adding Paragraphs Only For Mobile View

HTML & CSS
1

Hi,

I have two views one for mobile and the other for desktop using css media queries. My question is around paragraphs in the mobile view, I would like to split one paragraph into two so it displays better on smaller devices. I have it working but want to ask what the best approach is for SEO when using semantic tags, or a better way or recommended way to write my code.

I have used two sections with different IDs to display or hide the desktop text or mobile text depending on the screen resolution . One has two paragraphs and the other just one, but the text is exactly the same.

  • Note that I have no heading tag for the desktop view, this is intentional as I display the title just in a different location on the desktop view.

I understand that section semantic tags should contain a heading tag, however mine doesn’t in the desktop view but does in the mobile view. I’ve read that Google indexes mobile first for SEO, so does it matter that the h2 heading tag is not inside of the section tag on the desktop view?

Then finally is there another way to just maybe have one section id rather than two to reduce the code - that adds the extra paragraph in the mobile view?

      <section id="cars-mobile">
      <h2 class="page-heading">Car Title</h2>
      <p>This  is my first paragraph on mobile</p>
      <p>This is my second paragraph on mobile</p>
      </section>

      <section id="cars-desktop">
        <p>This is my first paragraph on mobile. This is my second paragraph on desktop.
      </p>
      </section>

Many Thanks,

2

Without seeing the layout you produce its hard to tell but it looks like you could simply wrap a span around the secondline of text and then in the moblie media query set it to display:block to form a second line

<p>This is my first paragraph on mobile. <span class="mview">This is my second paragraph on desktop</span>.</p>

I will avoid duplicating content at all costs unless there is absolutely no alternative. Usually with a bit of creative thinking you can achieve both mobile and desktop designs without switching separate blocks of code on and off.

3

Thanks Paul really appreciate the fast response and solution. That worked great going down to just one section ID with a span tag. I then set display: block in the mobile media query and display: inline in the desktop one. My only other question was does it now matter that I’m hiding the heading tag in the desktop view in terms of SEO? It’s there in the mobile view?

Thanks

4

I tend to glaze over when I hear SEO mentioned. :slight_smile:

All I’m interested in is my visitors and what’s best for them. If the site is accessible and usable then a good amount of seo comes already baked in.

Heading tags are a major source of navigation for assisted devices and allows them to move between sections easily.

Either the section needs a heading or it doesn’t. If it’s just some vague bold comment then it most likely should not be a heading anyway.

New sections should really have a heading tag although you can be creative with the styling if you want.

Rather than using display none you could use a technique that just hides for visual users.

1 Like
5

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