CODEWITHSUNDEEP
htmlcss
Ronan
Ronan

Reputation: 613

Content not showing on mobile device

I am working on a website it all works apart from the page below when used on a mobile device. The accordion is supposed to work to show the menu items when that that menu section is active, but on mobile devices the content does not show up when the accordion is active?

http://valleyinn.ie/menus/menus.html

The html

<H1> A La Carte Menu </H1>
    <div class="wrapper"> 
    <ul class="accordion">
        <li class="nav-dropdown">
            <input type="radio" name="accordion" id="menu 1" />
            <label for="menu 1">
                Starters
            </label>
            <div>
                <h2>Starters</h2>
                <p>Prawn cocktail : Clogherhead prawns coated in Marie Rose sauce served with salad</p>
                <p>Garlic Bread: Garlic bread coated with mozarella cheese</p>
                <p>Bruchetta: Garlic toastie with tomato, basil and melted mozzarella</p>
                <p>Deep Fried Brie: Breaded parcels of Brie deep fried and served with redcurrant jelly</p>
                <p> Garlic Mushrooms: Deep fried breaded mushrooms with garlic mayonnaise</p>
                <P>Fan of Melon: Fan of honeydew melon served with Raspberry Coulis</P>
                <p>Caesar Salad: Crispy cos tossed with bacon, croutons & creamy caesar dressing with parmesan shavings</>
                <p>Soup of the Day
                <p>Chicken Wings: Marinated chicken wings served with sweet chilli dip & side salad</p>
                <p>Egg Mayonnaise</p>
                <P>Tiger Prawns: Served with honey mustard dressing & garlic bread</P>
            </div>
        </li>

and the css

div#title {
    text-align:center;
}
body div.wrapper {
    clear:both;
    border: 1px solid #dedede;
    margin: 25px auto;
    overflow: hidden;
    width: 80%;
 }   
ul.accordion {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul.accordion li input {
    display: none;
    padding: 0;
    margin: 0;
    visibility: hidden;
}
ul.accordion label {
    background-color: #000000;
    border-bottom: 1px solid #dedede;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
    color:  #F9C921;
    display: block;
    font-weight: bold;
    line-height: 42px;
    padding: 0 8px;
}
ul.accordion label:hover {
    background-color: #F9C921;
    color:#000000;
    cursor: pointer;    
}
ul.accordion li input ~ div {
    background-color: rgba( 0, 0, 0, .05 );
    max-height: 0;
    opacity: 0;
overflow: hidden;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
ul.accordion li input ~ div p {
    font-size: .9em;
    margin: 16px 24px;  
}
h1 {
    clear:both;
}
ul.accordion li input:checked ~ div {
    max-height: 100%;
    opacity: 1;
    visibility: visible;
}
ul.accordion li input:checked ~ div > ul {
    display: block; 
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

any possible fixes or workarounds I cant think of where to start apart from making a mobile device specific page which I haven't done before

solved by changing code to avoid problem.

Upvotes: 1

Views: 3518

Answers (1)

KingsInnerSoul
KingsInnerSoul

Reputation: 1382

In summary, different browsers parse code differently. And some are better in automatically "fixing" HTML errors. Check that the browser you are using the mobile device is updated. Then check if it supports that method.

In your code: You are missing a closing </p> as it shows only as </>, and two are uppercase </P> so change them to lowercase </p>, and soup of the day is missing a closing </p>. Also change the ID name from menu 1 to menu_1.

Upvotes: 1

Related Questions