XF 2.2 What is the proper way to add banners to nodes?

RichDevman

Active member
I am talking about the example below. I have this coded without using exact dimensions so that the theme stays reflexive. The problem is that this causes a cls issue for Google. How can I add dimensions but keep this reflexive?

Screenshot (12).webp
 
Thanks

Can I do this but have the % for the max width and the dimension for the width?

width="100%" style="max-width:728px; height:auto; max-height:90px;

So like this?

width="728px" style="max-width:100%; height:auto; max-height:90px;
 
Last edited:
Be aware a wide banner like that even when set to responsive sizing will never look good on a small screen. You should look into either displaying a completely different image or no image at all for a small screen size in this instance. This can be done through css media queries.
 
why not style="max-width:728px; max-height:90px;" only ? by default and without contraindication it seems to me that the image will take up all the space granted to it within the limits of its own dimensions.
The question is: does GG consider max-width and height as dimensions or as properties ?
 
Be aware a wide banner like that even when set to responsive sizing will never look good on a small screen. You should look into either displaying a completely different image or no image at all for a small screen size in this instance. This can be done through css media queries.
They do not show up on mobile. They are good for everything else.
 
Be aware a wide banner like that even when set to responsive sizing will never look good on a small screen. You should look into either displaying a completely different image or no image at all for a small screen size in this instance. This can be done through css media queries.
Can you explain this for me? I would like to remove these banners from mobile. They are gifs and are slowing load times down. Thanks
 
650px corresponds to the portrait mode in smartphone.
900 px to the landscape mode in a smartphone, so you can decide if its better to choose 650 or 900px for your case.

Or use the XF syntax
Less:
@media (max-width: @xf-responsiveWide)
{
    /* CSS for Wide Width Screens Here */
}

@media (max-width: @xf-responsiveMedium)
{
    /* CSS for Medium Width Screens Here */
}

@media (max-width: @xf-responsiveNarrow)
{
    /* CSS for Narrow Width Screens Here */
}
 
650px corresponds to the portrait mode in smartphone.
900 px to the landscape mode in a smartphone, so you can decide if its better to choose 650 or 900px for your case.

Or use the XF syntax
Less:
@media (max-width: @xf-responsiveWide)
{
    /* CSS for Wide Width Screens Here */
}

@media (max-width: @xf-responsiveMedium)
{
    /* CSS for Medium Width Screens Here */
}

@media (max-width: @xf-responsiveNarrow)
{
    /* CSS for Narrow Width Screens Here */
}
Thanks! I really appreciate it!
 
Top Bottom