Jump to content

Coding Just For Mobile

Recommended Posts

Site URL: http://www.robin-lyons.com

Hi there,

I want to make a couple of changes to my website but just for mobile without effecting the desktop experience of my website.

The changes I want to make for the mobile experience are the following:

- Reduce the font size on my portfolio navigation screen.

-Reduce the font size navigation footers that take you to the next or previous piece of work

I've included screenshots of both to show how the font is too big at the moment on mobile.

Any help very much appreciated.

Cheers,

 

Robin.

Screenshot 2022-01-24 at 10.20.47.png

Screenshot 2022-01-24 at 10.23.02.png

Link to comment
  • Replies 4
  • Views 290
  • Created
  • Last Reply

Top Posters In This Topic

Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
/* Portfolio items size */
span.portfolio-hover-item-content {
    font-size: 30px;
}
/* pagination titles */
.item-pagination[data-collection-type^="portfolio"] .item-pagination-title {
    font-size: 18px;
}
}

 

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
11 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
/* Portfolio items size */
span.portfolio-hover-item-content {
    font-size: 30px;
}
/* pagination titles */
.item-pagination[data-collection-type^="portfolio"] .item-pagination-title {
    font-size: 18px;
}
}

 

Hi that worked great but how do I close up the line height between each title on the media screen pages. They have become very spaced out now. I tried adding line-height: 2px to the block of css but it didn't seem to work...

Screenshot 2022-01-25 at 20.16.10.png

Link to comment

Use this new code

/* Mobile */
@media screen and (max-width:767px) {
/* Portfolio items size */
span.portfolio-hover-item-content {
    font-size: 30px;
}
h1.portfolio-hover-item-title {
    line-height: 20px !important;
}
/* pagination titles */
.item-pagination[data-collection-type^="portfolio"] .item-pagination-title {
    font-size: 18px;
}
}

 

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
14 hours ago, tuanphan said:

Use this new code

/* Mobile */
@media screen and (max-width:767px) {
/* Portfolio items size */
span.portfolio-hover-item-content {
    font-size: 30px;
}
h1.portfolio-hover-item-title {
    line-height: 20px !important;
}
/* pagination titles */
.item-pagination[data-collection-type^="portfolio"] .item-pagination-title {
    font-size: 18px;
}
}

 

Great, thank you so much for your help!

 

If possible theres a few last things I’d love your help to change just for my mobile viewing experience without changing the desktop viewing experience:

1. On my contact, about and pages linked through from my work menu I’d like the hamburger menu to be the colour #111111. I’d like for the hamburger menu to remain white on my home menu page and on my work menu page please.

2. Is it possible to target certain images in pages to constrain their level of crop in mobile? For example on this page: https://www.robin-lyons.com/work/ladbrokes the image of the tickets at the bottom of the page looks great in desktop viewing experience but on mobile the edges are cropped too much. I’ve attached screenshots of examples side by side to illustrate what I mean.

3.When I view my Heading 1 text on my work pages in the ‘Mobile Preview’ within the Squarespace editor the text line height formatting is close together and looks great (what I want). However when I view the same text on my mobile (iPhone 12 mini) the text line height is super spaced out which I don’t want. Is this possible to fix through code? I’ve attached a screen shot of the two examples side by side for reference.

4. On my home screen landing page I’d like the text that says ‘Robin Lyons’ 10px or so smaller if possible.

 

Thank you so much for any help in advance!!!

Cheers,

Robin.

Screenshot 2022-01-26 at 23.55.53.png

Screenshot 2022-01-26 at 23.50.56.png

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

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.