Multiple H1 headings

Hi @dumel

Actually you have 7 h1 tags on the linked page, 6 coming from your sliders and 1 coming outside of the sliders.

If you open the source code of your page ( press right click > and choose “View page source” ) and you search for the expression:

<h1

you will see that yourself.

So one thing that you need to understand is that, it doesn’t matter if you hide an element with CSS in a certain view ( e.g. with “display: none;” ), the element is still part of the document.

If you only want a single h1 tag in the slider, then you shouldn’t duplicate the content.

For example I noticed that you are displaying the same text with multiple h1 tags just because you want to display the text in different positions. You don’t need to duplicate content for that, you just need to adjust the Inner Align – Vertical Align settings on the container elements in the different views, as they are device specific settings. So they can have different values in the different views.

If you are not familiar with our Device specific settings, you can find our tutorial video here:

• https://www.youtube.com/watch?v=GUMeRd4W_bM&ab_channel=NEXTEND

Another problem that I noticed:

You added your texts with Absolute position:
https://smartslider.helpscoutdocs.com/article/1916-slide-editing-in-smart-slider-3#absolutewhich is a bad practice, as absolute position is not intended for content, but for decoration. It might seem easy that you can position the layers with drag and dropping anywhere on the canvas, but as you start inspecting your slider in smaller screens you will realize that it is very hard to achieve any descent result with absolute position, as absolute positioned layers are just floating on the slide, so depending on the aspect ratio of your slider, they can appear in different positions and go offscreen.
Content should be built always with Default position, which works like a page builder. If you are not familiar working with Default position, you can learn more about it in these tutorial videos:

• https://www.youtube.com/watch?v=dsnTJmnko0I&ab_channel=NEXTEND
• https://www.youtube.com/watch?v=phYmntXifbs&ab_channel=NEXTEND

Best regards,
Laszlo.

Hi @dumel

As for the device specific adjustments:

As it is mentioned in the tutorial video that I linked above:
https://www.youtube.com/watch?v=GUMeRd4W_bM&ab_channel=NEXTEND
the settings that have a small screen icon next to their names, are Device specific settings. Those can be adjusted separately in each view. The settings without device icons, are typically shared settings, meaning that if you modify it in one view, that will affect to the other views as well.

Font size: So for example, the Size setting that you adjusted in the video, is not a device specific setting. That defines rather the base font size. If you want to reduce the font size in the different views, you shouldn’t adjust the base font size, but the Text Scale:
https://smartslider.helpscoutdocs.com/article/1812-layer-style#responsive

Position: Also when you adjusted the position of your Absolute positioned text via drag and droping in tablet view, that actually adjusted the device specific settings called “Left” and “Top”, that’s why the position specific adjustments you made in tablet view didn’t affect to desktop.

A general problem with your approach: In your screen record I also noticed that you are still trying to build your content with absolute position although I recommended above not to do that, as absolute position is not meant for building content.
Like I suggested above, you should add your layers with Default position:
https://smartslider.helpscoutdocs.com/article/1916-slide-editing-in-smart-slider-3#default
and if you want to adjust the position of the layers, then you should do that via the Inner Align and Vertical Align settings of the container elements, e.g. on the Content layer or the Column. If you check the tutorial videos the I linked above, that will help you understand the way you should use this editing mode properly.

A problem with the way you are trying to add texts over background images: Whenever you want to add a text over an image, and your image has both light and dark areas, then it is a good practice to:

• either darken/lighten the are of the entire image by creating and overlay, so the text has a nice contrast. ( To do this you should enable the “Overlay” setting and select a semi transparent Color: https://smartslider.helpscoutdocs.com/article/1724-slide#image )
• or darken/lighten the background of the text ( to do this, you should e.g. add a Row with a Column, but your content into the column, then set a semi transparent background color for the column or the Row depending on your preference. )

So modifying just the text color is not optimal and all and won’t guarantee that your text is legible in all views, since when you inspect the results on different devices, your text might appear at different positions, or simply your text is wrapped into more lines making some parts of the text overlap areas of the image where the font color makes the text blends in.

Here you can find some examples showing the way you should handle this matter:

• https://smartslider3.com/video-particle/
• https://smartslider3.com/testimonial-thumbnail/
• https://smartslider3.com/image-slider/
• https://smartslider3.com/full-width-post-slider/

As for the question about the H1 tags:

If you add only a single Heading Layer with H1 tag selected, then it will generate only a single h1 tag. Translating this to your example, 3 headings generate 3 h1 headings. The reason in your case 6 h1 tags are generated is because you actually use 6 h1 tags, just you hid 3 of them, but hiding them doesn’t matter, like I mentioned above elements with “display: none;” are still part of the document.

Best regards,
Laszlo.