Jump to content

Archived

This topic is now archived and is closed to further replies.

mpturner

Masthead Font Changes = Non-Responsive

Recommended Posts

mpturner    0
mpturner

Hi all,

 

By default, the Masthead font reduces perfectly on the iPhone, for example. But when I edit the size of the font within CSS, it becomes non-responsive. I've also tried using percentages to no avail. As you can see from my CSS below, I am attempting to make the title smaller and the tagline larger, yet keep it all responsive.

 

Thanks much,

Michael

 

.masthead {
  margin-bottom: 0px !important;
}
 
.masthead .masthead-title {
  color: #4E4F4F !important;
  font-size: 56px !important;  
}
 
.masthead .masthead-tag {
  color: #4E4F4F !important;
  opacity: 1.0 !important;
  font-size: 36px !important;
}
 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
Hi, This is because by default when you resize your browser the Masthead title is resized using @media queries. Therefore, if you change the font size of the Masthead title, you will also need to do the same i.e. change the font size via @media. Below is the default code for the Masthead and its @media queries.
.masthead .masthead-title {
margin-bottom: 9px;
font-size: 81px;
letter-spacing: -1px;
line-height: 1;
margin-bottom: 18px;
}

@media screen and (max-width: 980px)
.masthead .masthead-title {
font-size: 72px;
}

@media screen and (max-width: 768px)
.masthead .masthead-title {
font-size: 54px;
}

@media screen and (max-width: 480px)
.masthead .masthead-title {
font-size: 45px;
margin-right: 0;
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
mpturner    0
mpturner

Thanks Danny, however I am confused.

 

In your code above, if I only change the first size (81px) to say... 56px... and don't touch the @media sections, shouldn't those @media options still work as-is since they aren't percentages of the 81px... they are what they are in pixels? I ask, because the font sizes that render on the iPhone are perfect as-is. I only want the desktop version to change, but when I do that, it's breaking the mobile font resizing.

 

Thanks for the help,

Michael

Share this post


Link to post
Share on other sites
Rob    547
Rob

Use em or percent sizing, instead of px.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
mpturner    0
mpturner

I've tried that, Rob, but no love. I guess I need to read-up on my CSS knowledge. I'm just not getting why changing the primary font size would even impact the @media queries when they have their own font-size that should override any other font settings, provided the screen size matches. But no matter what I do to that very first font-size -- the 81px code -- it ruins responsiveness on the iPhone.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Its most likely that your custom code, is overriding the @media queries and therefore, the @media CSS isn't being used. The best thing to do is, add your own @media queries.

 

The code I provided above will assist you in creating your own @media.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Frederic    3
Frederic

Hi Danny

 

I have read the above codes and found them great as i was also wondering why fonts do not resize when going on ipad or smaller screen.

 

So I will definitely try that.

 

You gave an example for   .masthead .masthead-title 

 

Do I use the same @media screen and (max-width: 768px) with titles in highlight, hero and icall?

 

I have 

.pl-hero-wrap .pl-hero h1   for Hero

.section-highlight .highlight-head   for Highlight

.section-icallout .icallout-head   for iCall

 

Is that ok using:

@media screen and (max-width: 980px)
.section-icallout .icallout-head {
font-size: 72px;
}

@media screen and (max-width: 768px)
.section-icallout .icallout-head {
font-size: 54px;
}

@media screen and (max-width: 480px)
.section-icallout .icallout-head {
font-size: 45px;
margin-right: 0;
}

 

I assume there is not need to do that for the taglines - they would end up too small

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

I haven't checked your code personally as we do not provide assistance to custom code. However, it looks about right, if it doesn't work you may want to prefix your code with one of the PageLines override which are available on our custom CSS documentation.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • lionel1
      By lionel1
      Hi,
      I use on my home page " impulse module " but when i look on my iPhone the image is cut and not responsive .
      i only have this problem with this module not with the other one .
      thanks for ur help
      website / www.elonakane.com 
      Lionel 
       
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      every since Chrome introduce scroll anchoring (see chrome://flags) blog posts on my page start scroll automatically as soon as the user scrolls down a bit. It is super annoying and I don't know exactly what triggers the incompatibility with Chrome's latest feature that is supposed to improve usability.
      Since I don't know what causes it (Pagelines, or a Plugin), I would like to disable the feature using a CSS override that Google describes as follow:
      "Scroll anchoring aims to be the default mode of behavior when launched, so that users benefit from it even on legacy content. A CSS property overflow-anchor can disable scroll anchoring in part or all of a webpage (opt out), or exclude portions of the DOM from the anchor node selection algorithm. This property supports the following values when applied to an element E:
      overflow-anchor: auto (the default value) declares that the DOM subtree rooted at E is eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E. overflow-anchor: none declares that the DOM subtree rooted at E is not eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E." Do you guys happen to know how to use that property with the ROOT element so it applies to the whole page?
      Thanks
      Michael 
    • StuLeeUK
      By StuLeeUK+
      Good morning,
      I have set up my homepage using the Elements sections, a Masthead at the top and then a selection of Heroes lower down.
      I only just realised that the Heroes set a H1, as does the Masthead.
      Is there an easy way I can change the Heroes to an H2/H3 etc so as to improve the structure of my headers, whilst keeping the Masthead as H1?
      I really don't know much at all about CSS, which is why I use Pagelines because it's just so easy to create good looking pages without too much confusion.
       
      page for reference is https://www.avangocouriers.co.uk
      Thanks,
      Stu
    • kwaoru
      By kwaoru
      Hi,
       
      I have been using DMS and pagelines.
      I am facing to a huge trouble with the appearance of one of my page on mobile (smart phones) built with pagelines.
      However I haven’t come to any solutions to organise either edit the appearance of mobile view to look neat or deactivate the responsive function. 
      Now it looks totally messy on the phone...
       
      1. Is there any way to edit the appearance of the mobile version (responsive theme)?
      2. Is there any way to deactivate responsive function?
       
      If I could receive support from you to go thorough this process I would be happy to be a pro member. 
       
      Looking forward to hearing from you.
    • Paul
      By Paul+
      I have woocommerce store, product shows title and price fine until reduce screen with on a tablet/mobile phone the price and title gets removed?  Any ideas? 
      Here's an example page: https://thelaptopfixers.com/product/operating-system-re-install/
      Try it on both desktop PC browser then resize to mobile/cell phone size!  
      Thanks
×