Coding Just For Mobile

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.

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

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

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

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.