Recent
Categories
View Replies (5)

Header Images - Harmony - responsive design

  1. Issue
0
Votes
Undo
  1. kaiserf
    kaiserf
  2. Sherlock Holmes
  3. Commercial Templates
  4. Monday, 16 April 2018
  5.  Subscribe via email
Hello Ciarán,

I use the template harmony. We have incorporated on the page https://www.salzstiegl.at/de/ Header Images. Now to my question: In the mobile view, the background images are not scaled. My client does not want to install a slider because he likes the variant very much. How can I scale the header images in Responsive Design? Is there a solution at all?

Thanks for your help
Franz Kaiser
Responses (5)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Franz

To amend you can add the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)...

@media only screen and (max-width: 1024px) {

#container_header {

    height: auto !important;

    min-height: auto;

    padding-top: 50%;

}}


Does this give you the desired result?

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
kaiserf
kaiserf
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Ciarán,

I tried a lot now, but unfortunately with this code the menu bar is moved down. Unfortunately that does not look very good.
Is there still another solution?

LG Franz
Attachments (1)
Salz_1.JPG Salz_1.JPG
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Would you have a direct URL to an example of this issue? We are currently unable to replicate on any browser with your site.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
kaiserf
kaiserf
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hello ciaran,

I send you the access data per mail.

Franz
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Franz

Does changing the suggested CSS to the following help in any way?...

@media only screen and (max-width: 1024px) {

#container_header {

    height: auto !important;

    min-height: auto;

    padding-top: 50%;

}

.header-3 {

    top: 0;}

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 5
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!