Mobile Theme Layout Size Reduced

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

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;
}

Thanks for replying so quickly!

I tried the @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.

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?

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.

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

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: https://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) 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?

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.

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;
}

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.

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;
 }

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 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.

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.

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.

Awesome! Glad it’s all figured out now, sometimes it just takes some persistence ??