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

How to find Block Id for specific css changes.

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

Share this post


Link to post

9 answers to this question

Recommended Posts

  • 2

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)

Share this post


Link to post
  • 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)

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

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


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

Share this post


Link to post
  • 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

Share this post


Link to post
  • 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 !

Share this post


Link to post
  • 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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...