Changements for mobile devices

• 

  maebelbakker · Member · May 31, 2016 at 3:07 pm

  • Copy link
  • Add topic to favorites

  Hi there,

  i’m struggling with my website and how it appears on a mobile device, for example mobile phone or ipad. Therefore i have 2 questions.

  Is there a CSS code that allowes me to use submenu’s on the website when viewed on a pc, but not shown on a mobile device?

  And could i change how the footer menu with widgets appear on a mobile phone, maybe with a CSS code as well?

  Thank you in advance.

  Maebel
  website : https://spanishschooltours.com/

  The blog I need help with is: (visible only to logged in users)

• 

  siobhyb · Member · Jun 1, 2016 at 7:01 am

  • Copy link

  Hi Maebel,

  Is there a CSS code that allowes me to use submenu’s on the website when viewed on a pc, but not shown on a mobile device?

  You can make use of CSS Media Queries to target devices of certain widths.

  As an example, the following CSS will completely hide the headlines from your front page on devices that are 1024px in width or less:

  @media screen and (max-width: 1024px) {
      .featured-pages .headline {
          display: none;
      }
  }

  I can’t currently see any submenus in the main menu of your site. If you point me to the specific menu items that you’re trying to hide on mobile, though, I’ll be happy to help with the CSS you need.

  And could i change how the footer menu with widgets appear on a mobile phone, maybe with a CSS code as well?

  Media Queries can be used for this purpose too. How exactly would you like to change the footer menu?

• 

  maebelbakker · Member · Jun 1, 2016 at 2:43 pm

  • Copy link

  Thank you so much for responding!

  I added 2 sub menu’s to the main menu under “features”. Could you explain me how i can remove these 2 from the website shown on a mobile device?

  For the footer menu, I would like to let the widgets appear under eachother except of next to, because it makes the search option look weird, and the other widgets aren’t in proportion.

  Thank you in advance!

• 

  siobhyb · Member · Jun 1, 2016 at 4:59 pm

  • Copy link

  Hi there,

  I added 2 sub menu’s to the main menu under “features”. Could you explain me how i can remove these 2 from the website shown on a mobile device?

  You can hide all sub menus from mobile devices using the following CSS:

  @media handheld, only screen and (max-width: 1024px) {
  ul.mobile-menu ul.sub-menu, ul.mobile-menu ul.children {
      display: none !important;
      visibility: hidden !important;
  }
  }

  For the footer menu, I would like to let the widgets appear under each other except of next to, because it makes the search option look weird, and the other widgets aren’t in proportion.

  The following will stack your widgets one on top of the other while viewing on mobile:

  @media only screen and (max-width: 767px) {
  .footer-widgets {
      display: block;
  }
  }

  Hope that’s helpful! Please don’t hesitate to let me know if further questions come up.

• 

  maebelbakker · Member · Jun 2, 2016 at 8:30 am

  • Copy link

  Perfect, thank you so much!
  I have one last question about the CSS coding for the footer menu. Is it also possible to let the first 3 widgets appear next to eachother and the search bar under them?

• 

  siobhyb · Member · Jun 2, 2016 at 11:30 am

  • Copy link

  Hi there,

  Sure thing. :) You can achieve that with the following:

  .footer-widgets {
      display: block;
  }
  
  #search-8 {
      clear: both;
  }

  Let me know if any extra questions come up around that.

• 

  maebelbakker · Member · Jun 2, 2016 at 12:15 pm

  • Copy link

  I added this CSS code, but it still appears in the same way as the first version. I just added the new coding under the 1st one, is that correct?

• 

  siobhyb · Member · Jun 2, 2016 at 3:25 pm

  • Copy link

  Hi there,

  Could you please remove the following from the top of your CSS editor?

  .footer-widgets {
  	display: flex;
  	justify-content: space-around;
  }

  Once removed, please add the snippet I provided at the very bottom. It should then work as expected.

  Let me know if anything else comes up.

• 

  maebelbakker · Member · Jun 6, 2016 at 9:33 am

  • Copy link

  It’s working, but on mobile and pc website and i only wanted the search option to appear under the menu’s on a mobile, not on a pc . What do i need to change then?

• 

  siobhyb · Member · Jun 6, 2016 at 1:39 pm

  • Copy link

  Got you! In that case, please add the previous CSS snippet back to your custom CSS.

  You can then “disable” it on mobile devices by using a media query:

  @media handheld, only screen and (max-width: 1024px) {
  .footer-widgets {
  	display: block;
  }
  }

  Let me know how you get on with that.