laurenjaynehughes Posted April 22, 2020 Share Posted April 22, 2020 (edited) Site URL: https://bernardandhawkes.com/articles-home Hi, The copy on one of my pages has letters going onto two lines when it hits smaller desktop screen sizes and on iPad. You can see this here https://bernardandhawkes.com/articles-home (Recently Published, Staycations etc) I am wondering if I can put a media query to go to the mobile view when the viewport hits a certain size, as I would really like to keep the current layout out for larger desktop screens. Also very open to hearing if there is a better way to do this than a media query. Thanks so much! Edited April 22, 2020 by laurenjaynehughes Link to comment
tuanphan Posted April 24, 2020 Share Posted April 24, 2020 You mean Recently Published text or Recently Published posts? 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
laurenjaynehughes Posted April 24, 2020 Author Share Posted April 24, 2020 Hi, I was meaning the title of the section, but it doesn't seem to be doing it anymore! It does still happen on Staycations though! Link to comment
tuanphan Posted April 25, 2020 Share Posted April 25, 2020 20 hours ago, laurenjaynehughes said: Hi, I was meaning the title of the section, but it doesn't seem to be doing it anymore! It does still happen on Staycations though! You can change title size, with this CSS (Home > Design > Custom CSS) /* tablet */ @media screen and (max-width:991px) and (min-width:768px) { /* stacations */ div#block-5e874825130e984bfc011395 h3 { font-size: 20px; } /* recent published */ div#block-yui_3_17_2_1_1585781296243_6471 h3 { font-size: 20px; } } /* mobile */ @media screen and (max-width:767px) { /* stacations */ div#block-5e874825130e984bfc011395 h3 { font-size: 25px; } /* recent published */ div#block-yui_3_17_2_1_1585781296243_6471 h3 { font-size: 22px; } } 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
Asiya Posted December 17, 2020 Share Posted December 17, 2020 On 4/25/2020 at 5:26 PM, tuanphan said: You can change title size, with this CSS (Home > Design > Custom CSS) /* tablet */ @media screen and (max-width:991px) and (min-width:768px) { /* stacations */ div#block-5e874825130e984bfc011395 h3 { font-size: 20px; } /* recent published */ div#block-yui_3_17_2_1_1585781296243_6471 h3 { font-size: 20px; } } /* mobile */ @media screen and (max-width:767px) { /* stacations */ div#block-5e874825130e984bfc011395 h3 { font-size: 25px; } /* recent published */ div#block-yui_3_17_2_1_1585781296243_6471 h3 { font-size: 22px; } } hi, @tuanphan I am having issues on iphone 5. I see other iphones are good but iphone 5 is not the right view I am getting. when I use max width as 375px or something similar to target only iphone 5, all other iphones gets disturbed which are set at 640px or 764px. can you help. https://www.charlottedabat.com/about check out the pictures on this page. Thank you MB12 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment