Different banner size in different pages

  • 1
  • Question
  • Updated 2 years ago
  • Answered
I want to have a header/banner with 529 px height on my home page and another with 200 px height for all other pages how can I do that? what code should I add to my CSS to adjust the banner size in other pages?
Photo of Negar

Negar

  • 97 Posts
  • 3 Reply Likes

Posted 2 years ago

  • 1
Photo of Peter Sauer

Peter Sauer

  • 150 Posts
  • 65 Reply Likes
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Negar

It's possible to set this, using custom CSS code (provided you have Yola Silver or Yola Gold). However, before I check how to do this in your case (as the code depends on the Style Template), I'd like to let you know that from a webdesigner's perspective, it's considered to be professional to have the same banner size throughout your whole website as a matter of consistency. That's why we didn't provide the option to set the banner area size per individual page in the Style Designer (while you can have a different banner on each page).

If you'd still like to change your banner size on page level, you could first try to add a banner of a different size to a particular page, using the Style Designer, and check whether the banner area size adapts or leaves a blank space where the banner is too short. If that doesn't work, please let me know the URL of your published site, and I'll try to figure out a code solution for you.
Photo of Negar

Negar

  • 97 Posts
  • 3 Reply Likes
Hi there, thanks I know what you mean about consistency but still I like to try this. If you go to
http://a-r-tdesign.yolasite.com/
Compare index and About Us page you will see that the size doesn't adjust.
Photo of Peter Sauer

Peter Sauer

  • 150 Posts
  • 65 Reply Likes
Hi Negar
What I did was go to the  style >designer and set the layout fields Basically you have now reduced the banner field to a single line, this will now allow you to drop a picture widget into this space and load your image, once this is done you can adjust the size of the image .
This will also give you a mobile friendly image, currently yours does not resize
Photo of Negar

Negar

  • 97 Posts
  • 3 Reply Likes
Hi Peter,
Thanks for your reply. I tried and it's not possible to drop a picture image in this header area. So I could not do the adjusting. Don't forget that my homepage is still that big banner this is gonna be all other pages except home page so in CSS the adjustments that I set works for home page I need to also adjust the rest of the pages banner.
Photo of Peter Sauer

Peter Sauer

  • 150 Posts
  • 65 Reply Likes
Hi Negar,
 do you have an email, I can send you a more details description on how I used an image for my website banners.
Reply to my email address petersauer@shaw.ca

 

Photo of Saskia

Saskia

  • 110 Posts
  • 11 Reply Likes
Hello Negar,

This is just a courtesy message to let you know I  have replied to you via email. We were able to resolve your issue as you can see in your Sitebuilder.

Let us know if there is anything else we can assist you with.

Thanks,
Saskia