H1 page-title - any ideas on css for mobile?

Site URL: http://www.willyschilli.com.au/about

Hi everyone!

Having some trouble resizing H1 for mobile on my site. I have managed to get paragraph and other headings to resize on mobile, however I can't get the H1 resize working for the page titles. I have tried a bunch of different H1 tags, using #, and also referencing the yui id, but no luck. 

Example page: https://www.willyschilli.com.au/about 

Text I am trying to change: 'About Willys Chilli Hot Sauce'.

The current code I'm using that isn't working is below, I have also attached a screenshot on mobile. Any help would be massively appreciated! Thanks 🙂

@media only screen and (max-width: 640px) {

h1 site-title {

font-size:3rem!important

}

}} 

This text isn't the the h1 title, but the page description.  Your h1 is being hidden right now by something. This should change the font of the text you are referring to.

@media only screen and (max-width: 640px) {
	.page-description {
		font-size:3rem;
	}
}

16 hours ago, ChrisBartow said:

This text isn't the the h1 title, but the page description.  Your h1 is being hidden right now by something. This should change the font of the text you are referring to.

@media only screen and (max-width: 640px) {
	.page-description {
		font-size:3rem;
	}
}

 

Thanks for the reply Chris, I have just tried this code but no luck. Also added !important and nothing.

Inspecting the code it mentions div-class, does this need to be included somewhere? Also any idea why H1 would be hidden? I had hoped this text would be in H1 for SEO purposes?

Yes, you probably want the H1 title showing for SEO purposes.  I think on most 7.0 templates the Page Title is used as the H1 and the Page Description is listed below it. This seems to be displaying just the Page Description. Both can be found under Page -> Settings -> General.

I'm guessing you may have other CSS enabled to hide it since the title is just About so it appears that way in the navigation?

More info on the Page Title

11 minutes ago, ChrisBartow said:

Yes, you probably want the H1 title showing for SEO purposes.  I think on most 7.0 templates the Page Title is used as the H1 and the Page Description is listed below it. This seems to be displaying just the Page Description. Both can be found under Page -> Settings -> General.

I'm guessing you may have other CSS enabled to hide it since the title is just About so it appears that way in the navigation?

More info on the Page Title

Thanks, I don't have any other CSS hiding the H1 title. I have tried deleting the page description text thinking perhaps that was overriding the H1 title appearing in the same space somehow, but no dice. This has me stumped!

Applying css mobile dispaly rules to h text works for all the other headings on the page... except for the heading overlaid on the image! I might have to try setting the page as an idex and overlaying across the image that way. If you have any other CSS suggestions I'm all ears!

Try this just to try to narrow it down to make sure it's not something else preventing it from changing the size. If it works, you can then try to see if font-size makes a difference instead of color.

.page-description p {
		font-color:red;
}

17 hours ago, ChrisBartow said:

Try this just to try to narrow it down to make sure it's not something else preventing it from changing the size. If it works, you can then try to see if font-size makes a difference instead of color.

.page-description p {
		font-color:red;
}

 

Nope, that doesn't work either.

I have tried including the H1 within the standard copy on the page and applying H1 mobile formatting which isn't working either! It is still working on H2 and H3 though. 

I have very little custom css on the site - the only css I have is included below. Is it possible the template is overriding somewhere?

.product-price {
  font-size: 1.4em !important;font-family: "Museo-sans" !important; font-style: 900;
 }
#productDetails .product-title { font-size: 3.5em; font-family: "Museo-sans" !important; font-style: 900; letter-spacing: -.01em; }

@media only screen and (max-width: 768px) {

   .index-section-wrapper .content.has-main-image h1:not(.OT_subtitle){
       font-size:50px!important;
   }

   .index-section-wrapper .content.has-main-image h2:not(.OT_subtitle) {
       font-size: 55px !important;
   }
  

   .index-section-wrapper .content.has-main-image h3:not(.OT_subtitle) {
       font-size:28px !important;
   }
}
@media only screen and (max-width: 640px){ p {font-size:1.1rem!important} }
@media only screen and (max-width: 640px){ h3 {font-size:2rem!important}
@media only screen and (max-width: 640px){ h1 {font-size:1rem!important} }}

There is an error in the last 3 lines with your brackets being nested that may be causing it. You can re-write it like this while you are at it to make it clearer.

@media only screen and (max-width: 640px){ 
	p { font-size:1.1rem!important; }
	h3 { font-size:2rem!important; }
	h1 { font-size:1rem!important; }
}

On 4/22/2020 at 6:58 PM, ChrisBartow said:

There is an error in the last 3 lines with your brackets being nested that may be causing it. You can re-write it like this while you are at it to make it clearer.

@media only screen and (max-width: 640px){ 
	p { font-size:1.1rem!important; }
	h3 { font-size:2rem!important; }
	h1 { font-size:1rem!important; }
}

 

... still no luck sorry Chris! Any other ideas?

Is this line in your custom CSS? Cause this is what is taking priority for the size.

h1:not(.OT_subtitle){font-size:50px !important}