Responsive Headings on ipad

Site URL: https://www.ronaldaartsen.com

Hi, 

Wasn’t sure if I had to post this in Site Design or here, but I recently changed to 7.1 from 7.0. and took Merida as a starting point. Now I am really satisfied with the desktop view, and on my phone. But on my ipad it seems it does not show right the responsiveness with fonts. It breaks down the headings so one letter is broken off. Kind of bad hyphenation which may be solved with css, but if the headings would adjust size-wise it would solve the problem more easily. 

Is there any way I can accomplish this? Plus when I hold my ipad in vertical view, it shows the mobile menu, but still keeps two blocks next to eachother. 

Any help is much appreciated.

Thanks!

As a 'solution' for now I have adjusted the font sizes of 2 headings.

• The blog title from Extra large heading to custom 5.4em (was 6.5).
• And the page titles I used were large heading so I changed Heading 2 to 3.2em (was 4.2)

Which works for the titles/words I use, but of course is not ideal as it also changes the desktop view where I like the larger headings. So if anyone can provide a more elegant/responsive solution that would be most welcome.

And then the matter of still showing a semi-desktop view on a vertical ipad / portrait view remains. See last image above in my original post or here: https://www.ronaldaartsen.com/acupuncturist

Maybe you can help? @tuanphan

You solved?

5 hours ago, tuanphan said:

You solved?

Thank you @tuanphan for replying. But I did not actually solve it:

***

"As a 'solution' for now I have adjusted the font sizes of 2 headings.

• The blog title from Extra large heading to custom 5.4em (was 6.5).
• And the page titles I used were large heading so I changed Heading 2 to 3.2em (was 4.2)

Which works for the titles/words I use, but of course is not ideal as it also changes the desktop view where I like the larger headings."

***

• Q1: I would like the Extra large heading and page title to decrease in size only on the iPad view but still show the normal size in desktop view. Strangely enough it does normal resizing on a phone. So is there a CSS that can target the heading size on an ipad?
• Q2: And then the matter of still showing a semi-desktop view on a vertical ipad / portrait view remains. See last image above in my original post or here: https://www.ronaldaartsen.com/acupuncturist In vertical view or portrait is switches to a mobile menu, but it still has the image and text next to eachother which makes it look very narrow. I would like it to be stacked on top of eachother in vertical view just like on a phone.

Hope this helps and thanks again.

/* query for tablet */
@media screen and (min-width:768px) and (max-width:991px) {
	h2 {
		font-size: 30px;
	}
  div#page-section-5e7b84465088c64ab7ecee6d .row .col {
      width: 100%;
  }
}

1 hour ago, tuanphan said:

 

/* query for tablet */
@media screen and (min-width:768px) and (max-width:991px) {
	h2 {
		font-size: 30px;
	}
  div#page-section-5e7b84465088c64ab7ecee6d .row .col {
      width: 100%;
  }
}

 

Wow thank you so much! That works like a charm for this page title and layout in a vertical view. Super! Is there a quick way/code to do that for all the pages and not just this page section? (ed. Probably just remove the #page-section bit as far as I can see).

And could you tell me how I can solve Q1 which is the adjustment of the heading size of the post title (extra large/H1) on for example the ipad. See https://www.ronaldaartsen.com/blog/lagenvanmeningen Also see this screenshot. Thanks again @tuanphan!

Solved it. I think. By browsing through Tuanphan's replies to other posts 'I came up' with adding the following to the code:

  h1 {
    	font-size: 82px !important;
  }

As I know virtually nothing about CSS I have no idea if this is correct but it seems to work for me now.