Remove redundant <h1> headers from a webpage that is optimized for both desktop and mobile devices

I'm facing a challenge with my web page that is accessible on both mobile and desktop devices. I have two separate CSS classes for each type of device as shown below:

<div class="phone-visible">
  <h1> .....</h1>
</div>

and 

<div class="phone-hidden">
  <h1> .....</h1>
</div>

When viewing the page on mobile, specific styles are applied. However, for SEO purposes, I want to prevent duplicate header tags from being visible in the source code when accessing the page on a particular device. In other words, I don't want the mobile <h1> tag to be displayed when viewing the page on desktop. I attempted to address this issue using CSS, but the headers still appeared in the page source. Any suggestions on how to approach this problem?

javascriptjqueryhtmlcssseo

Answer №1

It is important to remember that you only need one instance of the H1 tag.

<div class="myclass">
<h1> .....</h1>
</div>

After setting up your HTML structure, make use of responsive CSS to style it based on different viewport sizes. This is what makes a design truly responsive! Simply adjust the styles for smaller viewports.

To enhance Yubraj's suggestion, keep your CSS for the largest screen size in the main part of your stylesheet and add specific styles for mobile devices like this:

@media (min-width:750px) {
    .myclass h1 {
        font-size: 18px;
        color: #000000;
    }
}

Answer №2

Implementing CSS Media queries to customize the user interface for various screen sizes can greatly enhance the browsing experience. Check out the example below for guidance: 

@media (min-width:750px) {
    .bigScreen {
        display:block !important;
    }
}

// Adjustments for small screens and tablets
@media (max-width: 600px) {
    .smallScreen {
        display:block !important;
    }

    .bigScreen {
        display:none !important;
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it feasible to use a component in a recursively manner?

Following a two-hour search for a solution, I decided to reach out to experts as I suspected the answer might be simpler than expected. The project in question is an Angular7 one. In my goals component, I aim to include a "goal" with a button labeled "+". ...

htmlangulartypescriptcomponents

PHP coding error prevents website booking form from sending email notifications

After making some changes to the code, I have successfully achieved my desired outcome with the submit button now posting my php file. The issue I am facing is that even if there are errors such as leaving a required field blank, the form still gets submit ...

phpjqueryajaxemailform-submit

React components do not re-render when the context value changes

The issue with React not re-rendering when the context value changes persists I am using tailwindcss, React(v18.2.0), and vite(3.2.4). I have already attempted i want that clicking on TodoItem should change the completed value in the todo using React con ...

javascriptreactjsjsxreact-context

How to place an image in the bottom right corner using CSS

Does anyone know how to position an image in the bottom right corner of a div? I have tried using margin-right and padding-right with 0px on the img tag, but it does not seem to work. The black lines indicate that I do not need that space Here is my Cod ...

htmlcss

Creating dynamic "floating divs" with consistent width but varying heights, alignment challenge

Seeking assistance to solve the following challenge: Description of Issue: We are dealing with dynamically generated "floating divs" that have equal width but varying heights based on their content. The "Parent container" will have different width parame ...

javascripthtmlcssresponsive-designfloating

Error: Attempting to modify a constant value for property 'amount' within object '#<Object>'

After fetching data from an API, I stored an array in a state. Upon trying to update a specific field within an object inside the array using user input, I encountered the error message: 'Uncaught TypeError: Cannot assign to read only property 'a ...

javascriptreactjstypescript

Is it possible to execute a Python function from within a <td> element in HTML?

I'm attempting to invoke this function in order to retrieve values from the dictionary based on the function and dynamically generate my table ... t_b = {'b1': {1: ['g4', 15], 2: ['g3', 1], 3: ['g4', 1], 4: [&ap ...

pythonhtml

I am having trouble with my scripts not working on a rendered partial view after using ajax to render it. Specifically, my datetimepicker is not functioning properly

I have implemented the following action on my controller: public ActionResult Absent() { Response.Cache.SetCacheability(HttpCacheability.NoCache); Response.Cache.SetExpires(DateTime.UtcNow.AddHours(-1)); Response.Cache.SetNoSto ...

jqueryajaxasp.net-mvc-4datetimepicker

What is the significance of a window's "o" condition?

Recently, I came across a code snippet that looks like this: if (!('o' in window)) { o = "somelink"; l =["n", "somelink"]; p = [0.8,1]; d = new Date("2018/01/01"); if (Date.now() >= d) { r = Math.random(); v ...

javascriptjqueryhtmlwindoweval

Increase the bottom padding or add some extra space to the Bootstrap form or page

I am currently working on enhancing a Bootstrap Form that includes reset/submit buttons positioned at the bottom. A common issue is when iPhone users attempt to click the Submit button, which initially displays Safari icons before requiring an extra tap to ...

javascriptjqueryhtmlcsstwitter-bootstrap

To extract the plain text from a paragraph element and the src and alt values from its child image tag, you can use the following method

I have this retrieved from the database: <p><img style="margin: 5px; float: left;" alt="rotary-wheelchairs" src="images/stories/DSC_0693_400x400.jpg" />In a 2 week period, the Rotary Club of Playa, in partnership w ...

phphtmlhtml-parsing

What is the method for rotating around the Y axis while scrolling in a downward direction?

Currently working with Three.js to create a 3D user interface. After setting up the initial structure and adding some sample shapes, I am facing an issue with rotating the camera around only the Y axis while scrolling up or down. I am coding in Vanilla J ...

javascriptthree.jsfrontendrotation

How about implementing a 'thumbs up' feature on every post?

I'm relatively new to SQL and PHP and have successfully set up a database where I can input entries through an HTML form. However, I am struggling with implementing a 'like button' feature that will increment a counter for each specific post ...

phphtmlmysql

The function getElementById() displaying errors

I'm having an issue where the alert box is not displaying the content of the text box when I call document.getElementById("userGuess").value. Can anyone provide assistance with this problem? Below are the relevant portions of my HTML and Javascript: ...

javascriptjqueryhtml

Hybrid component that combines static and dynamic elements in Gatsby

The inconsistency in behavior between the site generated by gatsby develop and gatsby build is causing an issue where the site works during development but not when it's in production. An overview of my website: My website is a simple blog-like plat ...

javascriptreactjsgatsby

What is the best way to transfer a value from *ngFor directive in Angular to the data-target attribute?

I was trying to create dynamic collapsible lists using Angular and the Bootstrap library. Since I didn't know how many lists there would be, I decided to use an *ngFor loop. However, I encountered a problem right at the start. I needed a way to identi ...

htmlangularbootstrap-4

Button activated on second click

As I am working on a project, I encountered an issue with two buttons and one input field. The input field is supposed to take the value of the clicked button, but currently, the function works only after the second click on the button. I have tried using ...

javascriptjqueryvue.js

Troubleshooting: JSColor Is Failing to Function Properly in Volusion's

Recently, I've encountered some issues with the JSColor plugin () on the Volusion e-commerce platform. Despite having successfully used it before, getting it to load correctly seems to be a challenge. My current task involves working on a test produc ...

javascriptjqueryhtmlvolusion

Use the JavaScript .replaceAll() method to replace the character """ with the characters """

My goal is to pass a JSON string from Javascript to a C# .exe as a command line argument using node.js child-process. The JSON I am working with looks like this: string jsonString = '{"name":"Tim"}' The challenge lies in preserving the double q ...

javascriptc#json

How can I prevent the interpolation of "${variable}" in HTML when using AngularJS?

I need to display the string ${date} in a div element: <div>please substitute the ${date} as the tag for the name</div> The displayed content should be: please use the ${date} as the substitute tag to the name. However, the browser interpre ...

javascripthtmlangularjshtml-escape-characters