Mobile view footer and submenu problem

[sittingprettyclothing]

Good day

I have some mobile view problems:

1) The footer menu seems to be all scrunched up on the left, as a result its a long string of short words. I just want to fix this on mobile view only. Screenshot 1

2)The submenu does not want to collapse, after it has been expanded. I saw a few threads about this issue but I can’t seem to find anything that it has been resolved?

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1) This is caused by your custom CSS:

Guessing you added that for desktop without looking into the mobile consequence?

2) What submenu do you refer to?

[sittingprettyclothing]

1) Is it possible to add css just for the mobile view?

2) Not any of the submenu’s can collapse again after you’ve clicked on the arrow in the mobile view to open them, they just stay open.

[David Martin – Support]

1) You would use media queries: http://stephen.io/mediaqueries/

@media only screen and (max-width: 767px) {
#footer-widgets .span3:nth-of-type(1),
 #footer-widgets .span3:nth-of-type(2), 
#footer-widgets .span3:nth-of-type(3) {
    max-width: 100%;
}
}

2) Your mobile menu parent item link URLs need to be # rather than an actual link address if you want them to collapse.

[sittingprettyclothing]

1) And to center the main headings? I managed to center the menu items but not the main heading. See screenshot 2.

2) What if there the menu item is a page and not a link? Where would i put the “#’? Or am I entering it into the wrong place? Is there a specific place I need to change the mobile menu?

Sorry I struggled to understand this sentence in the forum too, not sure if I understand it correctly.

Many Thanks David 🙂

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1) You would modify the code to include the CSS text align property: ref: http://www.w3schools.com/cssref/pr_text_text-align.asp

@media only screen and (max-width: 767px) {
#footer-widgets .span3:nth-of-type(1),
 #footer-widgets .span3:nth-of-type(2), 
#footer-widgets .span3:nth-of-type(3) {
    max-width: 100%;
}
#footer h4 {
    text-align: center!important;
}
}

2) On the mobile menu, you insert a custom link.

[sittingprettyclothing]

How would I get to the mobile menu?
Cant seem to find it?

I need the Shop menu entry to be a page so the customer can click on the ‘Shop’ entry and then get redirected to the shop page, so I don’t think a # would work in this menu.

PLease advise

[sittingprettyclothing]

Can’t seem to edit my previous post.
The social icons are not aligned, any ideas?

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

you need to remove this custom css.

#footer-widgets .span3:nth-of-type(4) {
    padding-left: 16.6665%;
}

and add this one:

#footer-widgets .span3:nth-of-type(4) h2 {
    text-align: center;
}

-Rui

[sittingprettyclothing]

Hi Rui

If I remove and replace the css you provided it changes it on my website also. I just want the media only screen to change.

Also need an answer on the previous post, just above the one you answered.

Thanks!

[David Martin – Support]

As above, just put that in the media query.

@media only screen and (max-width: 767px) {
#footer-widgets .span3:nth-of-type(4) h2 {
    text-align: center;
    padding-left: 0;
}
}

[sittingprettyclothing]

Hi David

I tried that, but it doesn’t seem to work.

Thanks

[David Martin – Support]

You had a media query above that was missing a closing bracket.

}

Thanks.

[sittingprettyclothing]

Hmm, I don’t see it?
Please advise.

Thanks

[David Martin – Support]

Yeah I fixed it, adding it back for you.