Jump to content

Responsive Headings on ipad

Recommended Posts

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!

C20BBC16-67E3-464F-8E2D-2CCC68371BE7.jpeg

E5880E33-9D45-40F8-AC67-0733F1F5A854.jpeg

5B172246-02FD-4800-A651-5770903F7352.jpeg

Edited by Freedom
Link to comment

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

Edited by Freedom
Link to comment
5 hours ago, tuanphan said:

You solved?

image.thumb.png.3c4710e975764cd52b4b2c80c27d8bbd.png

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.

 

 

Edited by Freedom
Link to comment

 

/* 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%;
  }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!

 

vertical_view_post.png

Edited by Freedom
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.