Changing size of text in mobile menu / centre alignment of text

Site URL: https://accordion-jaguar-tztz.squarespace.com/config

Hi! Is it possible to change the size of the different pages on the menu, when on the mobile version?

Also, if possible, can the social link icons on that screen be resized?

Also, on the mobile version, is it possible to completely centre the menu headings, in this case "TRAILER MUSIC" is not centred (picture also attached) - can the size of these also be made smaller?

Have attached screenshot for your reference!

Many thanks for your help!

** Password for editing: ost

Tomm

#1. Which page are you referring to? I don't see it on homepage

#2. For desktop header icons?

https://accordion-jaguar-tztz.squarespace.com/?noredirect

Hey Tuanphan, 

1. If you preview mobile version of my page, the text on the menu screen in black in white I'm hoping to make a little smaller (ie. "HOME" / "PROJECTS" / ABOUT ME"). Here is the screenshot:

2. I mean the size of the social icons on that same black and white mobile screen (see above again).

3. I have another question - is there any way to make pictures on the mobile version smaller. On the desktop version you can, but on the mobile you can't seem to, it just stretches the full width, so it's really big looking (screenshot attached of award logo - example taken from PROJECTS > TRAILERS > top of page:

----

Many thanks for your help again!

Tomm

#1. #2. Add to Design > Custom CSS

/* burger menu */
.header-menu-nav-item a {
    font-size: 20px;
}
.header-menu-actions svg {
    width: 50%;
}

#3. Use this CSS

/* Mobile Trailer Music Logo */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1651801243469_12688 {
    width: 50%;
    margin: 0 auto;
}}

Thanks so much for that coding - appreciated! Tried 1, 2, and 3 out and they all work - if i wanted to apply #3 to all laurel award logos throughout the website, how would I do that? For example, there's another one, further down the page, on the TRAILER MUSIC section:

Would I have to individually find the code for each block for each laurel logo, and put that into custom css?

Thanks again!

Tomm

Hi, I also have another question (other question #1 in previous post):

2. Regarding Bandcamp album playlist embedding - I'm happy with the layout of the embedded playlist, but for some reason there's a huge gap underneath on my page...how do I remove that empty space? This problem is located on PROJECTS > SHORTS > speedy recovery:

https://accordion-jaguar-tztz.squarespace.com/projects/shorts

Many thanks for your help!

Tomm

Hey Tuanphan, any ideas on #1 and #2 above? Thanks to you the site is gradually starting to look better! 

On 5/11/2022 at 7:27 PM, tommmmusic said:

Thanks so much for that coding - appreciated! Tried 1, 2, and 3 out and they all work - if i wanted to apply #3 to all laurel award logos throughout the website, how would I do that? For example, there's another one, further down the page, on the TRAILER MUSIC section:

 

Would I have to individually find the code for each block for each laurel logo, and put that into custom css?

Thanks again!

Tomm

#1. You need to use 1 code = 1 logo. You can combine them, like this, to make code shorter

/* Mobile Trailer Music Logo */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1651801243469_12688, div#block-id2, div#block-id3 {
    width: 50%;
    margin: 0 auto;
}}

#2. Use this CSS
 

div#block-yui_3_17_2_1_1652398987764_7608 .embed-block-wrapper {
    padding-bottom: 30% !important;
}

Hey, thanks for the coding - #2 I tried out, but it looks like this on Desktop: the photo below it and the bottom of the Bandcamp player are right glued next to each other;

Mobile looks like this; 

I tried changing padding-bottom % but it doesn't help...

Also, for #1 when you say combine the code, do you mean put in each separate logo's code into a list, so where it says:

div#block-id2

'id2' should be replaced by yui-xxxxx? 

How do I find that yui blockcode, where do I look? For example, the second logo on that page, this one on "TRAILERS"...

Where do I find that code?

Many thanks for your help!

Tomm

Hey Tuanphan! 

**update**

#1 I've figured out how to find each individual image ID, thanks so much for the code, looks much better 🙂

#2 Solved! Rather than putting in the custom CSS for padding bottom, I compared mine to another friend's bandcamp he'd embedded; my embed code was incorrect. Just FYI, it needs to be formatted like this, with width as 100%, not as a px number. Here is the embed code I edited:

<iframe style="border: 0; width: 100%; height: 340px;" src="https://bandcamp.com/EmbeddedPlayer/album=519839169/size=large/bgcol=ffffff/linkcol=0687f5/artwork=none/transparent=true/" seamless><a href="https://tommmatthews.bandcamp.com/album/speedy-recovery-soundtrack-2019">Speedy Recovery Soundtrack (2019) by Tomm Matthews</a></iframe>

Much appreciated! 

I have a new question about the line spacing, particularly on mobile, I'll start a new thread!

Tomm