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
Go to solution Solved by brandon,

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 post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Posted Images

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)

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)

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

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)

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

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 !

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

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...