CSS Changes Between Mobile and Regular Site

• 

  thedoublecuts · Member · Apr 23, 2014 at 4:40 am

  • Copy link
  • Add topic to favorites

  Hi there,
  I’m using the 2011 wordpress theme and am having some issues when I load my site on the mobile devices.

  1. Fonts – all the fonts seem to have changed when I view the website on mobile devices on the mobile version. Is this an automatic function? Is there any way around this?

  2. Sidebar – I realize that on the mobile version, the sidebar gets bumped to the bottom. But on my regular site, I’ve added a border between the main content and the right sidebar. On the mobile version, this border remains in the main content but looks very strange (as the sidebar is no longer present). Is there any way to remove the border only on the mobile version?

  3. Menu – when on a mobile device but not using mobile mode (i.e. clicking view “Full Site” the menu items/pages get pushed out of the menu bar and are displaced into the main content of the page. This looks quite bad. Is there any way to fix this, or still have them appear as a drop down menu?

  Thanks in advance!

  Justin

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

• 

  thesacredpath · Member · Apr 23, 2014 at 8:01 pm

  • Copy link

  Hi there, since you are using a responsive width theme, I would suggest you turn off the dedicated mobile theme at Appearance > Mobile since Twenty Eleven is designed to work on all screen resolutions, even on a phone. Give that a try and see what you think.

  1. The dedicated mobile theme uses its own set of fonts. If you disable the mobile theme, as I mention above, your custom fonts will then show on mobiles.

  2. Let’s use a media query to hide that border line when the sidebar moves below the content. Add the following at the very bottom of your existing custom CSS.

  @media screen and (max-width: 800px) {
      #content {
          border-right: none;
      }
  }

  3. You have used a static value (height) for #access in your custom CSS. Change that to min-height as below and the menu grey area will then expand as the menu items flow to multiple lines.

  /*To Change Menu Size */
  #access {
  	min-height: 40px;
  }

• 

  thedoublecuts · Member · Apr 24, 2014 at 4:32 am

  • Copy link

  Hi Sacredpath,
  Thanks so much for your response . . . .those all worked great. I really appreciate it the help.

  I also notice that when viewing my site on a mobile device, all the content (basically everything except the header and the footer) seems to not be centered (it appears quite narrow and shifted to the right). Is there anyway to center the content and make use of the full width?

  Thanks again.

• 

  vinoddalvi · Member · Apr 24, 2014 at 7:23 am

  • Copy link

  Hi @thedoublecuts,

  Try using the following CSS code to center the content when viewing the site on a mobile device.

  @media screen and (max-width: 800px) {
      #primary {
           width: 100%;
       }
       #main #content {
           padding-right: 0;
       }
  }

  Kind Regards,
  Vinod Dalvi

• 

  thedoublecuts · Member · Apr 24, 2014 at 8:24 pm

  • Copy link

  Hi @vinoddalvi,
  Thanks for your help here. That looks great. How would I do the same thing for menu headings and the footer content on mobile devices (i.e. how would I make them centered and fill the width of the page)?

  Thanks again!

• 

  thedoublecuts · Member · Apr 24, 2014 at 8:55 pm

  • Copy link

  And by footer, I mean the sidebar which is now placed at the bottom. Sorry bout that!

• 

  vinoddalvi · Member · Apr 25, 2014 at 2:35 pm

  • Copy link

  Hi @thedoublecuts,

  You can use the following CSS code to center the menu headings and sidebar when viewing the site on a mobile device.

  @media screen and (max-width: 800px) {
     #branding .only-search + #access div {
         padding-right: 0;
         display: table;
         margin: 0 auto;
     }
    #secondary iframe.twitter-timeline {
         width: 100% !important;
         max-width: 100% !important;
     }
  }

  Best Regards,
  Vinod Dalvi