Jump to content

Mobile image resize across multiple pages (same images)

Recommended Posts

Posted

Site URL: https://www.thestrandedwailers.com/admiralbenbow

I'm creating an online songbook with separate pages for the lyrics of each song. I have Spotify and YouTube logo images at the top of each page of lyrics linking to the songs and want the logos to appear smaller on each mobile page.

I've managed to make the mobile images smaller for the first song here using the custom CSS below but when I duplicate the page to add the next song, the logo images appear larger again (mobile view).

Is there a way to make the logo images globally smaller on the mobile view of each song page without having to add individual CSS code for each  individual page? There are a lot of songs to add!

 

         /*Spotify Logo Resize*/
#block-yui_3_17_2_1_1626492210611_21470 
  { 
  width: 10% !important;
  margin: 0 auto;

  
      /*YouTube Logo Resize*/
#block-yui_3_17_2_1_1626492210611_22856
  { 
  width: 10% !important;
  margin: 0 auto;

Page_01.jpg

Page_02.jpg

  • Replies 1
  • Views 271
  • Created
  • Last Reply
Posted
On 7/24/2021 at 8:52 AM, jonathanw said:

Site URL: https://www.thestrandedwailers.com/admiralbenbow

I'm creating an online songbook with separate pages for the lyrics of each song. I have Spotify and YouTube logo images at the top of each page of lyrics linking to the songs and want the logos to appear smaller on each mobile page.

I've managed to make the mobile images smaller for the first song here using the custom CSS below but when I duplicate the page to add the next song, the logo images appear larger again (mobile view).

Is there a way to make the logo images globally smaller on the mobile view of each song page without having to add individual CSS code for each  individual page? There are a lot of songs to add!

 

         /*Spotify Logo Resize*/
#block-yui_3_17_2_1_1626492210611_21470 
  { 
  width: 10% !important;
  margin: 0 auto;

  
      /*YouTube Logo Resize*/
#block-yui_3_17_2_1_1626492210611_22856
  { 
  width: 10% !important;
  margin: 0 auto;

Page_01.jpg

Page_02.jpg

Hi. We can use FontAwesome Youtube/Shopify Icons for this.

On mobile, you want them side by side or stacked?

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!)

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.