Question 188928 in Html Question posted in
Some basic documentation can be found here.

Html – My links dissaperared from my website when i enter with a mobile device

I have a list on my html, i gave it styles and it works on desktop but no matter what i do, when i open it whith a mobile device it totally dissapear. I cheked it on live server but i cannot find a solution, the a tag is still on the page when the max width is equal to my media query. I tried display: block as well but nothing works.

My code is:

HTML:
<article class="main">

<div class="hoteles">
            <p>A continuación os dejamos una lista de Hoteles cercanos por si alguien quiere buscar alojamiemto:<br><br></p>
        <ul>
            <li><a href= "#">Example</li>
            <li><a href= "#">Example</li>
            <li><a href= "#">Example</li>
            <li><a href= "#">Example</li>
        <ul>
</div>
</article>

CSS:

.hoteles p{
    text-align: justify;
}

.main ul li a{
    color: black;
    font-weight: 100;
    font-size: 20px;
    padding: 7px 13px;
    border-radius: 3px;
    text-transform: uppercase;
}

@media(max-width: 858px){
.hoteles p{
        text-align: justify;
    }
    
    .hoteles ul li a{
        display: block;
        color: black;
        font-weight: 100;
        font-size: 20px;
        padding: 7px 13px;
        border-radius: 3px;
        text-transform: uppercase;
    }
}
Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    I remove the ul and il tag leting only the a tag and it works. I don´t know why this happens


  2. 0

    HTML tags are wrong <ul> <a> </a> </ul> That, the first thing to correct. Then, it COULD be the CSS that is not normalized (missing browser information)

    Esta mal puestas las etiquetas HTML <a> </a> <ul> </ul> Eso lo primero, luego, ve si se arregla, si sigue, quita los estilos CSS y ve si sigue sucediendo el problema, si sucede, significa que es el CSS. Hay un CSS normalizador que corrige problemas con algunos navegadores, por ejemplo, si no tienes un estilo definido los navegadores lo pueden tomar por un estilo predeterminado, busca "normalize CSS" y a partir de ese nuevo CSS haces tu estilo propio, de esa forma aparecerá todo (casi) exactamente igual en todos los navegadores, si no usas el normalize notarás que en Safari, Firefox o Chrome pueden existir variaciones o incluso cosas que no funcionen.

        <ul>
        <li><a href="test">Example</a></li>
        <li><a href="test1">Example1</a></li>
        <li><a href="test2">Example2</a></li>
        <li><a href="test3">Example3</a></li>
    <ul>
    Login or Signup to reply.
  3. 0

    You dont use the tags properly,
    change

    <ul>
            <li><a href= "#">Example</li>
            <li><a href= "#">Example</li>
            <li><a href= "#">Example</li>
            <li><a href= "#">Example</li>
        <ul>

    to

    <ul>
            <li><a href= "#">Example</a></li>
            <li><a href= "#">Example</a></li>
            <li><a href= "#">Example</a></li>
            <li><a href= "#">Example</a></li>
        </ul>
    Login or Signup to reply.
  4. 0

    It’s possible that the issue you’re experiencing is related to the CSS media queries not being applied correctly on mobile devices. This could be due to a number of reasons, such as incorrect syntax, conflicting CSS rules, or issues with the viewport settings.

    Here are some steps you can take to troubleshoot the issue:

    1. Check the syntax of your media queries: Make sure that your media queries are properly formatted and have the correct syntax. For example, the syntax for a media query targeting devices with a maximum width of 600 pixels is:

      @media (max-width: 600px) {
  /* CSS styles for devices with max width of 600px or less */
}
```

If your media queries are not formatted correctly, they may not be applied correctly on mobile devices.

    2. Check for conflicting CSS rules: Make sure that there are no other CSS rules that are conflicting with the styles you have applied to your list. You can use the web browser’s developer tools to inspect the CSS rules that are being applied to your list and check for any conflicts.

    3. Check the viewport settings: Make sure that the viewport settings in your HTML file are correctly configured. The viewport settings control how the web browser displays the web page on different devices. For example, the following viewport settings tell the browser to set the width of the viewport to the device width and to disable zooming:

      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
```

If the viewport settings are not configured correctly, the styles you have applied to your list may not be displayed correctly on mobile devices.

    4. Simplify your CSS: If none of the above steps help to resolve the issue, you may want to simplify your CSS and remove any unnecessary styles. This can help to identify any specific CSS rules that may be causing the issue.

    5. Test on multiple devices: Make sure to test your web page on multiple mobile devices to see if the issue is specific to a particular device or browser.

    I hope these tips help you to troubleshoot the issue with your list not displaying correctly on mobile devices.

    @media (max-width: 600px) {
  /* CSS styles for devices with max width of 600px or less */
}

``` If your media queries are not formatted correctly,
they may not be applied correctly on mobile devices.
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> ``` If the viewport settings are not configured correctly, the styles you have applied to your list may not be displayed correctly on mobile devices.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search