1. sjudelson
  2. Sherlock Holmes
  3. Commercial Templates
  4. Friday, 04 August 2017
  5.  Subscribe via email
I am using your Vitality template and duplicated the style page to create a homepage with a full screen header image on the home page. It looks fabulous on desktops, tablets and landscape phones. On portrait phones, however, the image is too wide so that only a portion fits. To try to fix this, I pasted the following code into the Phone (Portrait) Custom CSS field in the Responsive Options tab:

.vegas-slide-inner {
height: 300px;
background-size: 150% auto !important;
}

The image was tiny at 100% so I increased it to 150% to make the image wider. This left a lot of space above and below the image. The height line eliminated a lot of white space above the image, but a large amount of white space still exists below the image (see screenshot). Is there a way to fix this and/or a better way to address the issue of displaying the image in the Phone (Portrait) mode? Thank you!

Steven
References
  1. http://new.amagansettseasalt.com
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Steven

One option is to set a static height to your header area on mobile devices with the following custom CSS (Phone (Portrait) Custom CSS field)...

#header_bg {
height: 300px !important;
}


CiarĂ¡n
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you for the reply. I see the change the #header_bg height command makes, however I can see that most of the white space is the padding before the the article module located below the header that scrolls up and down..
  1. more than a month ago
  2. Commercial Templates
  3. # 2
  • Page :
  • 1


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