-
Posts
-
For a Dentist website I took a particular approach to H1’s, as I wanted them to be styled differently on desktop and mobile. Hence, I have a special heading block as H1 that is visible on all screens, except mobile screens and another special heading block that is visible on mobile.
Now the problem here is that my SEO tools tell me that there are two H1’s. I’m guessin that is because somehow both blocks are crawled. How should I tackle this?
Hey the_digital_manager,
Thank you for the inquiry.
You have to remove the duplicate element and use css media queries instead to apply different styles on mobile view to the remaining special heading element.
Example:
@media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ }Applying a custom css class name to the heading element should help in this case. Please check this documentation for more info.
// https://kriesi.at/documentation/enfold/add-custom-css/
Best regards,
IsmaelHi Ismael,
thanks for your reply, but you make it sound very easy, but I doubt I can approach this easily via CSS. I
How would I tackle the following in CSS?
visible on bigger screens (>990px)
– content sections that starts with a whitespace -200 (so that the column followed by it partially overlaps the header that is placed above it).
– The colum has the following padding: above: 75px, right: 150px, under: 75px, left: 150px.visible on all screens except bigger screen
– content section without negative whitespace as above
– but with a column with a negative -115px above margin, and different padding settings: above: 55px, right: 20px, under: 55px, left: 20px.This sounds like a whole lot of hassle to approach via CSS?
The H1 in itself isn’t any different on mobile than desktop. it’s the column that it is in that varies across screen sizes, see screenshot.
https://drive.google.com/file/d/1TN_P69eEO2IGx4eKTZLqGGhFoGe-j6sF/view?usp=sharingHi,
Thank you for the update.
On mobile view, you can adjust the padding and top margin of the column inside the first section with this css code, which should replicate the style of the duplicated heading.
@media only screen and (max-width: 989px) { /* Add your Mobile Styles here */ .responsive #top #av_section_1 .av-19t81w-2bbc381a2d0af00be60f54214198d121 { padding: 20px !important; margin-top: -115px !important; } }The selector av-19t81w-2bbc381a2d0af00be60f54214198d121 is the unique ID of the column element which is automatically generated by the builder or by the theme. You can replace that selector with a custom css class name or ID. Please check this documentation for more info.
// https://kriesi.at/documentation/enfold/add-custom-css/
Best regards,
IsmaelHi Ismael,
So, I’m struggling a bit with your explanation, even after reading the documentation you send. Are you saying that the first column, across the entire site, has that ID? I found a different ID, so I’m guessing thats not the case.
I’ve used the custom CSS class several times with enfold before, though I never worked with /* Add your Mobile Styles here */ , how do I use that code? if I were to give the column the custom CSS class customheader , how would the final css code look like? like below?
@media only screen and (max-width: 989px) { /*customheader*/ .responsive #top #av_section_1 .av-19t81w-2bbc381a2d0af00be60f54214198d121 { padding: 20px !important; margin-top: -115px !important; } }I’m getting the impression that I need to identify the unique ID for all first columns for all relevant pages and add those to the code above? (it’s 15 pages give or take.. )
What comes to mind is that the column, which is now visible on all screen sizes, already has padding settings (via the page builder). How is this handling the customer CSS above? Or do I need to define CSS rules for A. the largerst screen size and B. the other 3 sizes?
Hi,
Thank you for the update.
Are you saying that the first column, across the entire site, has that ID
No, just the column containing the special heading element inside the first color section, each element has their own unique ID (uid).
/* Add your Mobile Styles here */ , how do I use that code, how would the final css code look like? like below?
This is just a css comment which can be removed as you like. The final css code for an element with the customheader class name would look something like this.
@media only screen and (max-width: 989px) { .responsive #top .customheader { padding: 20px !important; margin-top: -115px !important; } }I’m getting the impression that I need to identify the unique ID for all first columns
Yes, you have to apply the same custom css class name (customheader) to every column in which the above style has to be applied.
Or do I need to define CSS rules for A. the largerst screen size and B. the other 3 sizes?
The css media query (max-width: 989px) that we defined above should handle screens not wider than 989px, all styles in that css media query will be applied when the screen width is equal or less than 989px (mobile phones, tablets, smaller laptops). Please check this article for more info about css media queries.
// https://css-tricks.com/a-complete-guide-to-css-media-queries/
Best regards,
IsmaelHi,
Great, I’m glad that Ismael could help you out. I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.
Best regards,
Rikard
- The topic ‘Seperate special headings as H1 for mobile and desktop. Crawlbot sees 2x H1's?’ is closed to new replies.