Title: Mobile Theme Layout Size Reduced
Last modified: August 24, 2016

---

# Mobile Theme Layout Size Reduced

 *  Resolved [Wahlii](https://wordpress.org/support/users/wahlii/)
 * (@wahlii)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/mobile-theme-layout-size-reduced/)
 * Hi Ben!
 * The adjustments I’ve made to my blog using CSS plus the upgrades I purchased 
   for the theme has made the appearance of my site something I’m happy about but
   the adjustments I’ve made translates well when viewing on a computer, when using
   the Mobile Theme….not so much.
 * The blog titles and headings which look fine on my computer look too large when
   using a mobile phone.
 * I was able to view posts on my phone through an app that somehow displayed the
   entire web page at a reduced size. All text, images and logo were smaller. Is
   that possible using CSS? To reduce the original size of the mobile version by
   about 15% or so?
 * Also, I’m realizing that from mobile view if you select the icon to display the
   menu some of the menu options appear behind the logo so they cannot be selected.
   I’m not sure anything can be done about that but it doesn’t hurt to ask.
 * I’d really appreciate some help in this. 🙂
 * Site: wahlii.com

Viewing 14 replies - 1 through 14 (of 14 total)

 *  Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * (@bensibley)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/mobile-theme-layout-size-reduced/#post-5985473)
 * Hey great job with the customizations!
 * What you’re looking for is media queries: [https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries)
 * Using a media query, you can apply CSS based on the screen size. For instance,
   this will make the post titles smaller on all screens less than 800px wide:
 *     ```
       @media all and (max-width: 800px) {
   
         .entry-title {
           font-size: 24px !important;
         }
       }
       ```
   
 * You can use the same trick to reduce/increase the size of any element in the 
   theme.
 * For the logo, the following CSS will push the menu down so that it fits nicely
   below the menu at mobile widths:
 *     ```
       .menu-primary,
       .menu-primary-tracks {
         padding-top: 12em;
       }
       ```
   
 *  Thread Starter [Wahlii](https://wordpress.org/support/users/wahlii/)
 * (@wahlii)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/mobile-theme-layout-size-reduced/#post-5985481)
 * Thanks for replying so quickly!
 * I tried the [@media](https://wordpress.org/support/users/media/) code and it 
   did work but isn’t there something I could use to reduce the entire site all 
   at one time?
 * I can see your suggestion will work and I WAS primarily concerned with the way
   my headings took over the page but if I was interested in reducing the logo and
   sharing widgets and the body of the posts etc etc that means I would have to 
   figure out each element to enter into the CSS customization sheet and adjust 
   each independently. *eep!*
 * That’s a daunting task for someone who barely knows what they’re doing! (you 
   can laugh…I wont judge)
 * If it has to be done then so be it but any quick fix? Thanks.
 *  Thread Starter [Wahlii](https://wordpress.org/support/users/wahlii/)
 * (@wahlii)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/mobile-theme-layout-size-reduced/#post-5985486)
 * UPDATE: it worked briefly. It was going fine until I entered the section to bring
   the menu down on mobile view. Things started going haywire after that. The font
   all of a sudden changed on desktop for the menu (it reverts to the original font
   for Tracks) but the post title’s mobile view remains fine. The menu is now below
   the logo perfectly. It seems I cant adjust the size of the headings and menu 
   position at the same time.
 *     ```
       @media all and (max-width: 800px) {
   
         .entry-title {
           font-size: 28px !important; font-family: EB Garamond;
       font-weight: 400;
       text-transform: capitalize;
       }
          .excerpt-title {
           font-size: 30px !important; font-family: Kristi;
       font-weight: 400;
       text-transform: capitalize;
       }
       ```
   
 * That responded on mobile fine until I added this
 *     ```
       .menu-primary,
       .menu-primary-tracks {
         padding-top: 12em;
       }
       ```
   
 * Now the menu alone works fine and everything else started going wrong. Any suggestions?
 *  Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * (@bensibley)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/mobile-theme-layout-size-reduced/#post-5985562)
 * Make sure you are not missing any closing brackets. In the first code snippet,
   there is not a closing bracket for the media query. I’m not sure if that’s just
   a mistake in posting here, but if that is the same on your site it would explain
   the weirdness.
 * I see what you’re saying now about reducing the size of everything. There is 
   actually a way to do this:
 *     ```
       body {
         font-size: 85%;
       }
       ```
   
 * The layout and typography in Tracks is based on `ems` which are based on the 
   body font size. Basically, if you reduce the size of the body font with a percentage
   lower than 100%, everything on the site will scale down.
 *  Thread Starter [Wahlii](https://wordpress.org/support/users/wahlii/)
 * (@wahlii)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/mobile-theme-layout-size-reduced/#post-5985576)
 * I erased everything and begun from here in the Tracks CSS Customization sheet.
 *     ```
       @media all and (max-width: 800px) {
   
       body
        {
         font-size: 80%;
       }
          .menu-primary,
       .menu-primary-tracks {
         padding-top: 14em;
       }
       ```
   
 * Everything else except the excerpt title, logo and footer decreased. I added .
   site-footer and the footer decreased. I then added .entry-excerpt but nothing
   changed.
 * I’m not sure why one is responding while the other is not.
    I should mention 
   that I use the Google fonts plugin and their Font control option but both .excerpt-
   title and .site-footer were added to their plugin so I’m still not sure how .
   site-footer is working and .site-excerpt is not when I’m adding it to the customization
   sheet. I would think both would not have responded if the plugin was interfering.
 * So to date I have
 *     ```
       @media all and (max-width: 800px) {
   
       body,
       .excerpt-title,
       .main,
       .menu-primary-items ul,
       .site-footer {
         font-size: 80%;
       }
          .menu-primary,
       .menu-primary-tracks {
         padding-top: 14em;
       }
       ```
   
 * The only thing not working with me is Logo and excerpt title
 *  Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * (@bensibley)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/mobile-theme-layout-size-reduced/#post-5985586)
 * Okay add the `font-size: 80%` to the body element only. It will affect all other
   elements on the site. Right now the body sets the font size to 80% and then elements
   in `.main` become 80% of that size, and then `.excerpt-title` becomes 80% of 
   that size resulting in very small text: [http://pics.competethemes.com/image/30130n2r2h1e](http://pics.competethemes.com/image/30130n2r2h1e)
 * The post titles on the post pages are currently being styled by the font plugin.
   The style is very specific ([screenshot](http://pics.competethemes.com/image/3J3a2J2N352M))
   which is why you’re having a hard time overriding it with your own CSS. Is there
   anyway you can remove the CSS from the font plugin that is making the post titles
   46px?
 *  Thread Starter [Wahlii](https://wordpress.org/support/users/wahlii/)
 * (@wahlii)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/mobile-theme-layout-size-reduced/#post-5985595)
 * Thanks a lot for pointing that out. I removed .entry-title from the plugin and
   instead placed it directly in Tracks’s CSS customization sheet.
    Also removed
   the 46 px and everything else you said to remove.
 * Removing the 46 px increased the font size of post titles on post pages from 
   desktop view. I can live with that. But in mobile view it is not showing the 
   EB Garamond font and I didn’t expect the post title to look so small. It looks
   less than 85 % of its original size.
 * Also the size of the logo has not budged.
 * So entry title and logo are now the stubborn ones. No way I can get the mobile
   view post title to mimic exactly the desktop view at 85%? Everything else seems
   to be cooperating.
 *  Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * (@bensibley)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/mobile-theme-layout-size-reduced/#post-5985598)
 * Okay cool, the entry-title will now be easier to style. Try the following:
 *     ```
       .entry-title {
         font-size: 36px !important;
       }
       ```
   
 * I used an `!important` tag just to be sure it works. If you want that to affect
   mobile widths, you can include it in a media query like this:
 *     ```
       @media all and (max-width: 800px) {
   
         .entry-title {
           font-size: 36px !important;
         }
       }
       ```
   
 * That 800px can be any value you’d like.
 * The logo size can be restricted like this:
 *     ```
       .site-title .logo {
         max-width: 200px;
       }
       ```
   
 * That will affect the logo at all screen sizes, but can be included in a media
   query as well to only affect mobile widths.
 * Lastly, the background in the mobile menu got a bit out of whack from the body%
   edit. The following will fix that:
 *     ```
       #menu-primary-tracks {
         top: 24px;
       }
       ```
   
 *  Thread Starter [Wahlii](https://wordpress.org/support/users/wahlii/)
 * (@wahlii)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/mobile-theme-layout-size-reduced/#post-5985602)
 * IT WORKS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 * 🙂
 * Everything from mobile view fits nicely on the screen now. HUGE improvement.
 * I’m however realizing that the entry title font on desktop is not the same as
   on mobile view.
    Is there any way to adjust that? I tried entering font-family
   in the media query section for mobile view but it didn’t work. I did the same
   for desktop view and it worked.
 *     ```
       @media all and (max-width: 800px) {
   
       body {
         font-size: 85% ;
       }
          .menu-primary,
       .menu-primary-tracks {
         padding-top: 12em;
       }
   
       .entry-title {
           font-size: 32px !important;
           font-family: 'EB Garamond' !important;
         }
   
       .site-title .logo {
         max-width: 220px;
       }
   
       #menu-primary-tracks {
         top: 24px;
       }
       }
       ```
   
 * That’s what I currently have.
 * When .entry-title was managed by the plugin the EB G. font did show up in mobile
   view. I’m not sure if I can get it to do that again without the plugin’s help.
 *  Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * (@bensibley)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/mobile-theme-layout-size-reduced/#post-5985615)
 * Great!
 * I think it would be easiest to update the settings in the plugin. It’s going 
   to be messier to add styles with the plugin and then also override them with 
   more CSS.
 * That said, to override the plugin’s code, you’ll just need to write more specific
   CSS. The plugin is already using !important tags, so to override it you’ll need
   to add even more specificity:
 *     ```
       #main .entry-title {
           font-size: 32px !important;
        }
       ```
   
 *  Thread Starter [Wahlii](https://wordpress.org/support/users/wahlii/)
 * (@wahlii)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/mobile-theme-layout-size-reduced/#post-5985635)
 * I’m not sure I understand what you’re saying I should do. ‘update the settings
   in the plugin’…Should I recreate the .entry-title font control in the plugin 
   then add to the Tracks CSS Customization sheet under [@media](https://wordpress.org/support/users/media/)
   section:
 *     ```
       #main .entry-title {
           font-family: 'EB Garamond' !important;
        }
       ```
   
 * ?
 * What I have done is remove the .entry-title font control from the plugin and 
   to maintain the same effect I added it instead to Tracks’s SS sheet as:
 *     ```
       .entry-title {
       font-family: \'EB Garamond\' !important;
       font-size: 42px !important;
       font-style: normal !important;
       font-weight: 400 !important;
       }
       ```
   
 * Which works well for desktop view but the prob is the mobile.
 * I tried doing this in Track’s CSS Sheet to see if it would change the font to
   EB G on mobile view.
 *     ```
       @media all and (max-width: 800px) {
   
       body {
         font-size: 85% ;
       }
          .menu-primary,
       .menu-primary-tracks {
         padding-top: 12em;
       }
   
       #main .entry-title {
           font-size: 32px !important;
           font-family: \'EB Garamond\' !important;
         }
   
       .site-title .logo {
         max-width: 220px;
       }
   
       #menu-primary-tracks {
         top: 24px;
       }
       }
       ```
   
 * . but it didn’t. I’m clearly misunderstanding something.
 *  Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * (@bensibley)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/mobile-theme-layout-size-reduced/#post-5985638)
 * Okay I’m not familiar with exactly how the plugin works, so I thought some of
   the CSS was coming from the font plugin.
 * The code seems to be working correctly when I view it. This snippet you have 
   sets the font family as EB Garamond at all screen sizes:
 *     ```
       .entry-title {
         font-family: \'EB Garamond\' !important;
         font-size: 42px !important;
         font-style: normal !important;
         font-weight: 400 !important;
       }
       ```
   
 * So with that^ you don’t actually need to use a media query for setting the font
   family again.
 * I would remove the backslashes from the font-family value in case these are causing
   a syntax error.
 *  Thread Starter [Wahlii](https://wordpress.org/support/users/wahlii/)
 * (@wahlii)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/mobile-theme-layout-size-reduced/#post-5985639)
 * ITS COMPLETELY FIXED!
    THANK YOU SO MUCH!
 * I took the advice you gave in regards to using #main .entry-title to override
   the plugin.
 * What I did was erase the following from the CSS Sheet:
 *     ```
       .entry-title {
         font-family: \'EB Garamond\' !important;
         font-size: 42px !important;
         font-style: normal !important;
         font-weight: 400 !important;
       }
       ```
   
 * recreate the .entry-title font control in the Google Font plugin then went into
   Track’s CSS Customization sheet and specified the size I want it to be on mobile
   using
 *     ```
       #main .entry-title {
           font-size: 32px !important;
        }
       ```
   
 * And it now works fine. 🙂
 * I’m deeply grateful for your patience and all your help. Thank you SO much.
 *  Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * (@bensibley)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/mobile-theme-layout-size-reduced/#post-5985640)
 * Awesome! Glad it’s all figured out now, sometimes it just takes some persistence
   🙂

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘Mobile Theme Layout Size Reduced’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/tracks/1.81/screenshot.png)
 * Tracks
 * [Support Threads](https://wordpress.org/support/theme/tracks/)
 * [Active Topics](https://wordpress.org/support/theme/tracks/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/tracks/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/tracks/reviews/)

 * 14 replies
 * 2 participants
 * Last reply from: [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * Last activity: [11 years, 1 month ago](https://wordpress.org/support/topic/mobile-theme-layout-size-reduced/#post-5985640)
 * Status: resolved