Resize text to appear mobile only

Hello everyone!

Please help me with the code to reduce the size of the text on Mobile preview only (I am happy with the desktop preview).

At the moment, this is how the text appears.

Website: https://caterpillar-antelope-zbjy.squarespace.com/projects/vakkaru

Password: ptphoto

@media only screen and (max-width: 600px) {
  .pagination-title-wrapper h2 {
      font-size: 6.8vw;
  }
}

This will dynamically size below 600px.

@rwp I love how my website is looking so far!

can you help me with the code for the social media links and footer text as well?

Many thanks,
P

@rwp Sorry for chasing you for this, but can you help with my follow up question as well? 

Stay safe,
P

On 7/13/2020 at 4:01 PM, Ptphotography said:

@rwp I love how my website is looking so far!

can you help me with the code for the social media links and footer text as well?

Many thanks,
P

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
footer.sections nav.sqs-svg-icon--list a {
    width: 10px !important;
}
}

@tuanphan Thank you for this! Can you please help with the code for the text underneath the icons as well? Thanks again!

36 minutes ago, Ptphotography said:

@tuanphan Thank you for this! Can you please help with the code for the text underneath the icons as well? Thanks again!

 

@media screen and (max-width:767px) {
footer.sections nav.sqs-svg-icon--list a {
    width: 10px !important;
}
div#block-yui_3_17_2_1_1591257510925_16938 * {
    font-size: 10px;
}
}

@tuanphan It worked! Thank you for this 😁