Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Media Queries to go to Mobile View


laurenjaynehughes

Question

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 by laurenjaynehughes
Link to comment

4 answers to this question

Recommended Posts

  • 0
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
  • 0
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

Create an account or sign in to comment

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

×
×
  • Create New...