How to set href attribute for two classes?-CodePudding

In my HTML code, I have an a tag refers to two sections in the same page. It's for ABOUT US in navigation bar. Both of the sections are the same, but they differ in d-none bootstrap class depending on which resolution you are surfing the website. as href attribute can refer to just one specific id, I'm stuck with it.

<li >
     <a  href="#aboutus" >About Us</a>
</li>

<section  style="font-size:13px">
        <div >
            <h3 >About Us</h3><br />
            <p>
                <a  asp-action="Index">AMRealEstate</a> is a group specialized in real estate market.
            </p>

        </div>

    </section>
    <section id="aboutus"  style="font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif">
        <div  style="border-radius:25px;border:solid 5px black;background-color:deepskyblue">
            <h1 >About Us</h1>
            <div >
                <img  src="~/image/logolarge.png" width="700px" height="550px"/>
            </div>
            <div  style="border:solid 3px white;border-radius:30px">
                <p>
                    <a  asp-action="Index">AMRealEstate</a> is a group specialized in real estate market.


                </p>
            </div>
        </div>
    </section>

CodePudding user response：

There are several things "off" in the code you provided. First of all; you already use css classes, so why add inline style rules as well? Just use classes. Furthermore - you have 2 instances of the "same" content - only difference really being one has an image (large screens most likely) or not (small screens) - text seems to be the same.

So why is the d-none on already on section, why not only hide the image - also because it not only defeats the purpose of a section in general you'll also have twice the same text. So also (when the text changes) twice the same edit action.

Revise your structure so you'll have 1 section about us and in that section decide to either show or hide parts of the content based on resolution.

CodePudding user response：

I have no experience with bootstrap, however you are duplicating the complete section which seems unneeded.

You are using bootstrap, they should have classes for media queries (in tailwind I work like this

<element >

This way you can use the same element for all sizes unless something major changes in your code structure. I think you should be able to use just one section and change the layout, make the image smaller or positioned elsewhere, this avoids the complete problem.

I provided a link to the breakpoints I found in the bootstrap docs, I hope this helps

bootstrap docs