Recent
Categories
View Replies (7)

Central Showcase Image Responsiveness

0
Votes
Undo
  1. SoundsEssential
    SoundsEssential
  2. Sherlock Holmes
  3. Commercial Templates
  4. Wednesday, 10 February 2016
  5.  Subscribe via email
Hi y'all,

It's been a minute since we developed a site for a client using your Central template (which we love!), and they've recently come back to us to change the homepage showcase image. That's all good and well, but because of the composition of the new photo, the default settings no longer work. We really need it to just be 100% responsive, but I cannot for the life of me get it to work.

I'm sure I'm just missing some piece of CSS in another location, but I have quite literally gone around in several circles now.
• I've tried a bunch of media queries, but the template didn't seem to be picking them up.
• I reset the template to its original settings and tried putting a responsive slideshow with the single image in the showcase position, but the image wouldn't show up.
• Then I put a static custom HTML module there, and that seemed to work with some adjustments to the wrapper width but there was still some margin/padding on the left and the right sides that I couldn't seem to get to go away, either.

So now I'm back to the original task - just adjusting the Showcase container to treat the image responsively. Or am also completely open to other ideas/thoughts/suggestions.

Site is live here: http://www.innisfreeinn.com/.

Thanks in advance,
Malice
Responses (7)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Malice

A little tricky as the image is a background-image to a div rather than an image within a div so the trick is keeping the div proportional to it's original size on smaller screen sizes. A bit of a CSS trick to achieve this might look something like the following (Custom CSS field)...


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

#container_header {

    height: auto;

    padding-bottom: 50%;

}}


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

Thanks for your response! I'm not sure that's doing what I was hoping it would. It's been implemented and is live on the site now, so you can see, but on phones, the image still isn't re-sizing down. Which is what they want -- I've explained it's going to be tiny and not worth much visually, but they still want it to be responsive.

Given that it's a background image, would it make more sense to put it in a module? I'm totally okay with that, but as I said, when I tried to use the slideshow with a single image (and setting the hornav and everything else back to the original template settings), the showcase was blank. I suppose I could try another slideshow component in there...

As you can see, I'm just spinning my wheels at the moment. Your opinion on the best way to achieve what the client is looking for would be very much appreciated.

Thanks!
Mal
  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
Hi Mal

Could you also try adding the following (after previous)...


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

#container_header {

    background-position: 50% 0 !important;

    background-size: contain !important;

    height: 200px !important;

    padding-bottom: 0;

}}


You can edit the height to your own taste however going to high will result in a white space below the image. The image should remain uncropped and resized on phones.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
SoundsEssential
SoundsEssential
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Okay, first my apologies in the loooooooooong delay in response. I'm afraid this issue took a little bit of a back seat. After trying any # of things, I just couldn't get it to work, so I swapped it out for a slider instead and moved the home page back to the default template menu settings, which client was fine with.

But now I'm finding another problem.

On mobile on interior pages, the sidecolumn-B modules -- which are set to show after the component -- are still showing first. The main component content shows up on scroll, but that's obviously not ideal if the component content needs viewing first.

I tried adding the adjustment you suggested in this post: http://www.joomla51.com/forum/search?query=page%20load%20mobile&;childforums=1.

Sample page here: http://www.innisfreeinn.com/rooms-rates/lord-tennyson-penthouse

Any other tweaks you might suggest?

Thanks!
Mal
  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 Mal

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


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

  #main {

      display:table;

  }

  #content_remainder {

      display: table-row-group;

        float: none;

    }

  .sidecol_a, .sidecol_b {

      display: table-footer-group;

        float: none;

  }

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 5
SoundsEssential
SoundsEssential
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
That did the trick!

I think that concludes all the issues.

Thanks again, and as always, for your exemplary support!!!
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
You are very welcome :)

Thank you for the update.

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


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