How to find Block Id for specific css changes.

I am looking to stop some images I have on my website showing in mobile view,I am using this code:

@media only screen and (max-width: 620px) {   div#yui_3_17_2_2_1506869794866_1346 {     display: none;  }}

it works however when you refresh the page, the yui has changed so it stops working.

Does anyone know if there is a way to get a more a more static block id so that on refresh the code hasn't changed and it always works?

My site is not live yet, so can't attach link to it... but would be good to know how to find the block Id, so I can use it on future sites also.

Hope someone can help.

Andrew

Hi @Therzo . IDs starting with

yui

will be dynamically generated on each page load and (as you observed) change accordingly.

However, IDs starting with

block-....

do not change. So as long as you don't delete the block and replace it with another, CSS targeted by block should continue to work.

Here are a couple loosely related threads that may have additional helpful information:

• https://answers.squarespace.com/questions/140670/background-image-bedford-how-to-code.html
• https://answers.squarespace.com/questions/47192/feature-request-ability-to-assign-custom-css-classes-and-ids-when-authoring-content.html

So, use the

block-....

IDs instead.

Do let me know if this works for you.

-Brandon

@BrandonW Do you know how to find the Block ID is? The inspector tool on Chrome only shows up the yui for me

If you provide a link to the page in question, I am happy to demonstrate via screenshot. In general, however, the block-IDs are present, or you can use the Chrome extension mentioned in one of the links mentioned.

https://andrew-squance-kwmr.squarespace.com/

This is as close as I have gotter, but still the yui

:/

@BrandonW Scratch that... I think those #block-yui do not change.

I was using another yui not the #block one, but I assumed all yui would change. However since putting these in and refreshing them, it seems to be working perfect.

Thank-you

Yeah, you got it now. I attached an image to my original answer for clarification for others. If this answer worked for you, please mark it accepted.

-Brandon

I've been looking for this info for two days now!
I'm building my website and I'm doing a few customisations to improve mobile view responsiveness!
 

On 10/2/2017 at 5:33 PM, brandon said:

Hi @Therzo . IDs starting with

yui

 

will be dynamically generated on each page load and (as you observed) change accordingly.

However, IDs starting with

block-....

 

do not change. So as long as you don't delete the block and replace it with another, CSS targeted by block should continue to work.

Here are a couple loosely related threads that may have additional helpful information:

• https://answers.squarespace.com/questions/140670/background-image-bedford-how-to-code.html
• https://answers.squarespace.com/questions/47192/feature-request-ability-to-assign-custom-css-classes-and-ids-when-authoring-content.html

So, use the

block-....

 

IDs instead.

Do let me know if this works for you.

-Brandon

---

 

Overall changes was alright, I needed to help on how to use code to target specific blocks.
I'm using Firefox and this post helped me get the right id to use.
Thanks @brandon

I am using the same extension to generate sections id. 

i wanted to modify my mobile view using the code 

<style>
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1590857274650_18829 {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}
}
</style>

However, when it did not work properly until someone told me to add (.summary-item-list) 

and i have to idea from where should i obtain the sector id (.summary-item-list) 

<style>
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1590857274650_18829 .summary-item-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}
}
</style>

if you have any idea guys please help it is so important to me !

3 hours ago, haidar said:

I am using the same extension to generate sections id. 

i wanted to modify my mobile view using the code 

<style>
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1590857274650_18829 {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}
}
</style>

However, when it did not work properly until someone told me to add (.summary-item-list) 

and i have to idea from where should i obtain the sector id (.summary-item-list) 

<style>
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1590857274650_18829 .summary-item-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}
}
</style>

if you have any idea guys please help it is so important to me !

Can you share link to page in your question + describe your problem? We can check carefully