Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to find Block Id for specific css changes.


andrewsquance

Question

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

Edited by Therzo
Initial Revision
Link to comment

9 answers to this question

Recommended Posts

  • 3

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:

So, use the

block-....

IDs instead.

Do let me know if this works for you.

-Brandon


If this or any other answer solves the problem, please give credit where credit is due: Accept the answer. Code is provided without any warranty, expressed or implied.

alt text

blockidvsyuiid.jpg.266d77ebe76f78d5750edadc152072cf.jpg

blockidvsyuiid.jpg.efc5665d2f95e58dfb7150be7bf9417b.jpg

Edited by brandon

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment
  • 0

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.

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment
  • 0

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:

So, use the


block-....
 

IDs instead.

Do let me know if this works for you.

-Brandon


blockidvsyuiid.jpg.266d77ebe76f78d5750edadc152072cf.jpg

 

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

Link to comment
  • 0

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 !

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...