- This topic has 3 replies, 2 voices, and was last updated 5 years, 11 months ago by
.
-Blog Layout is not optimized for mobile. Since many viewers will use a smartphone to access my website, i want to fix 3 issues:
1-The excerpt is very useful on desktop and tablet(mobile) but not on smartphone(also mobile). I am talking about slider excerpt and individual post preview excerpt. Is there a way to keep excerpt on desktop and tablet and disable it on smartphone ? I am fine with a compromise to disable for all mobile including tablet, but first suggestion would be nicer.
2-I set my post font to look good on desktop and tablet, but on smartphone it is too large. Is there a way to change it just for mobile ? In this case a compromise would not work, i want tablet font to remain the same as desktop. ….. Same modification would do good on homepage.
3-The third issue is related to the second. When on smartphone in portrait mode, the post page (entire page, not just text) margin is to large. I am left with 5 words per line. Is there a way to modify the margin just for smartphone portrait mode ?
…… Same modification would do good on homepage.
Thanks in advance for your support.
website: http://www.mihaipuscas.com
Solution for this topic
Hi @MihaiPuscas,
I hope you are well today and thank you for your questions.
1-The excerpt is very useful on desktop and tablet(mobile) but not on smartphone(also mobile). I am talking about slider excerpt and individual post preview excerpt. Is there a way to keep excerpt on desktop and tablet and disable it on smartphone ? I am fine with a compromise to disable for all mobile including tablet, but first suggestion would be nicer.
You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
@media only screen and (max-width: 480px) { .blog-list .post-content, .rev_slider .sh-rev-blog > p { display: none; } }2-I set my post font to look good on desktop and tablet, but on smartphone it is too large. Is there a way to change it just for mobile ? In this case a compromise would not work, i want tablet font to remain the same as desktop. ….. Same modification would do good on homepage.
Try using below CSS code to achieve this.
@media only screen and (max-width: 480px) { body #page-container * { font-size: 98% !important; } }3-The third issue is related to the second. When on smartphone in portrait mode, the post page (entire page, not just text) margin is to large. I am left with 5 words per line. Is there a way to modify the margin just for smartphone portrait mode ?
…… Same modification would do good on homepage.
Try using below CSS code to achieve this.
@media only screen and (max-width : 480px) { #page-container .container { max-width: 90%!important; } }Best regards,
Shufflehound teamIssues “1” and “3” are solved with your code. Regarding “2” i decided to leave it as it is. There are to many text sections that get changed. I would like to tweak one by one (post content, post title, widget section, post preview section, slider post title, etc.)
Thank you for your reply and confirming it.
