Text overlapping in the "header" for a page
-
I have a problem with the Vogue theme when looking at my website in my iPhone, or any other phone device. If I go to a page, in this case the ones I call “Styrelseledamot” and “Retorikkonsult”. Those are the titles of the pages, but in some way the theme also add to the right “Ellinor Borggren > Styrelseledamot” and the same with “Retorikkonsult”. I don’t want that, because it looks awful on the phone. See here:
https://www.ellinorborggren.se/wp-content/uploads/2016/07/13874853_10155143784134358_1740001713_n.jpgWhat can I do to fix it?
Best,
Ellinor
-
Hello, Ellinor:
I am not the theme developer but I have had the same issue. I found that styling fonts using the “vw”, which is a percentage, rather than “px”, will scale the font to the page space. Although the line-heights for the .entry-title and the breadcrumb line are somewhat inelegant in the small screen mobile device layout, you will see that your text will no longer overlap. You could also use CSS in your child theme to place the entry title and breadcrumb text at the same baseline if you want to really refine the layout.
Add the following to your child theme css (do NOT add the opening and closing “/* */”):
/* .entry-title {
font-size: 5.5vw;
margin-bottom: .55em;
} */I hope that helps!
Best,
Eric
- The topic ‘Text overlapping in the "header" for a page’ is closed to new replies.
