How show Blocks in sidebar, only in Wide and Normal layout?

Events happening in the community are now at Drupal community events on www.drupal.org.
jscm's picture

Hi,
I am trying to custom an Omega Subtheme. The real problem that I have at this time is: How show an Advertising block with width 300px only in wide or/and normal layouts?

If I Add a Context to show the block, I have this block showed in every layout.

If layout is wide I have not problem but when layout is narrow or normal or landscape the 300 px width block is to large for the sidebar.

What can I do to manage this kind of problems?

Regards

Comments

Is the advertising block an

jjprusk's picture

Is the advertising block an image? If so, you could probably set max-width:100% which would cause the image to always scale to the size of the region width...

The Advertising block is in

jscm's picture

The Advertising block is in every format (image, flash, text, ecc ecc)... width: 300 px. The code comes from the AdNetwork. It is not scalable.

Try Mobile Tools

michaelfillier's picture

Mobile Tools (http://drupal.org/project/mobile_tools) is supposed to provide context triggers based on width.

I have not tried it yet, but it seems to be what you are looking for.

CSS?

drew reece's picture

If you want to hide it you can use CSS. Hide the block or image in the global.css then unhide it in the wide & normal.css files. They override the global style sheet.

It's a little inefficient because the image will be still be downloaded & hidden for small screens, but it should achieve what you are asking.

I don't think it is a good

jscm's picture

I don't think it is a good idea use Mobile Tools if we are already using a HTML5 responsive theme.

About CSS Hide Block. Maybe it is better hide the block using Context Module or Block Settings.

The problem is that using Context I am not able to set the layout (narrow, normal, wide) where the block should be showed.

It looks like mobile tools

drew reece's picture

It looks like mobile tools could remove the block for the smaller screen sizes instead of CSS hiding.

What you are trying to do is actually a mixture of responsive & mobile. I don't think you are meant to remove pieces of content if you are being 'truly responsive'.

Another option would be to remove the block entirely & load it via ajax if the screen is greater than xpixels, but the advertisers may not like that.

Mobile tools provides context triggers.

michaelfillier's picture

Mobile Tools provides context triggers, so it could help with adding blocks on certain screen widths. Did you try mobile tools to see what context triggers are available. This way you won't have to hid the block, you would prevent it from being loaded in the first place.

Another argument against hiding the ad via css is that it might be against the TOS for the ad service (I know it is against Google's TOS). It might not be a big deal, but I would check with them first before resorting to this solution.

Hiding blocks and ad rules

bunthorne's picture

I have been told that it may be against contract terms to hide ad blocks, considering that it may be getting counted as a page view. Be very careful going down this route.

I am facing the same problem,though. The ad services are just starting to recognize the need for responsive sizing.

In the meantime, remember that an ad block is not "yours" to play with. You are selling space on their terms.

I would love to hear what solutions the ad services themselves are offering or supporting.

Ted Spencer
Addison Spencer Consulting LLC

Hiding blocks and ad rules

bunthorne's picture

Accidental repost

Ted Spencer
Addison Spencer Consulting LLC

Is it not possible to fix the

jscm's picture

Is it not possible to fix the width of a sidebar for Wide and Normal layout?...
... fixing the width of a sidebar the problem will be managed.

Disable the wide layout.

michaelfillier's picture

Maybe it is not necessary to even use the wide width. I normally disable it so I don't have to worry about styling issues like these.

That would seem like the easiest solution. Otherwise, would centring the ad help? You could style the block using the class that is added to the wide layout, something like:

.responsive-layout-wide .block-## {
text-align:center;
}
// or target the ad wrapper
.responsive-layout-wide .AD-CONTAINER-CLASS {
margin:0 auto;
}

My necessity is a fixed

jscm's picture

My necessity is a fixed sidebar width for normal and wide layouts. I need that layouts are responsible then I cannot disable layouts and services

Omega Framework

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week