Jump to content

Media Queries to go to Mobile View

Recommended Posts

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!

Link to comment
  • Replies 4
  • Views 8.6k
  • Created
  • Last Reply
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 7 months later...
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 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.