Recent
Categories
View Replies (6)

Beaumont header images resizing

0
Votes
Undo
  1. Mol4
    Mol4
  2. Sherlock Holmes The Voice
  3. Commercial Templates
  4. Monday, 23 May 2016
  5.  Subscribe via email
Hello Ciarán,

on my test website I'm using the slideshow with the header images. On my system everything works fine but my client has a larger screen and has a problem when resizing his browser window.
When he does that, the image is first getting larger than it's original size (and even than the max-width settings).
He uses Safari 9.1 on a Mac OSX 10.11.4.
I give you two images as an attachment, screenshot-01 is the 'normal' screen, screenshot-02 is after he resize his screen.
Thanks!
Responses (6)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

By default the images of your header have a background-size property set to 'cover'. This ensures that the slideshow will automatically fill the area provided regardless of the screensize. Because of this your images will be cropped either vertically or horizontally depending on the device. Changing this property will cause a 'letterbox' effect on your slideshow with blank space appearing either horizontally or vertically.

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

what do you advise me to do about this?
Is there a way to have the images not become too large when scaling the browser window so I can show my client the results?
Thanks!
  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

Sorry to say there is no real solution. You could set the background image to 100% width rather than cover however as you resize your screen there will be a blank space appearing under the image. You could try changing the proportions of the images to a greater height however this would increase load time with minimal return. It would be considered rare than a user resizes the browser window when browsing a site.

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

I know that it would be considered rare that users resize their browser window. But my client wants to see your solution to set the background-image to 100%. Can you please tell me where I can do so?
Thanks!
  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
Hello

To amend try adding the following to the Custom CSS field of your templates parameters...


.vegas-slide-inner {

    background-size: contain !important;

}


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

thanks for the update.
I've used this custom CSS on a page so my client is able to see this is no solution.
I will advise them not to do this, thanks!
  1. more than a month ago
  2. Commercial Templates
  3. # 6
  • Page :
  • 1


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

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok