Media Queries to go to Mobile View

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!

You mean Recently Published text or Recently Published posts?

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!

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;
}
}

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