1. Glen
  2. Sherlock Holmes
  3. Commercial Templates
  4. Saturday, 26 September 2015
  5.  Subscribe via email
1) I am only using one slide show image. Is there a trick to setting up the container height so that image height isn't lost for larger screens, and so much container padding/background image top and bottom... showing up for smaller screens?
http://www.shields.ca
I have slideshow height to 350. It should actually be like 450 to accommodate very large screens, but I'm willing to lose a bit for the 1920 view screen and focus on 1680 and below. Do I have to set up media queries for each size to make this not happen? Or is there a more global fix?

2) Also even though the slideshow image shows up for the 1024 view screen using testing methods such as firefox 'responsive design view' and other on-line tools, on the actual ipad itself the image doesn't appear although you can drag it into place from the left (temporarily).

3) In order to make the footer menu disappear I had to set up a css for display:none. Couldn't get it to turn off otherwise.

4) Can a column be made to drop to the bottom for smaller screens. I am referring to the side-col b for my index page on http://www.shields.ca where I have some quick links. For smaller screens I likely need to turn this off, but not sure of the css or media query to use. Ideally I'd like it to drop to the bottom, or to a lower module position.



Thanks
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

You can try adding the following to the Custom CSS field of your templates parameters (edit to taste)..


@media only screen and (max-width: 767px) {
#container_header {
height: 0;
}
#container_hornav {
margin-bottom: 0;
}
.logo a {
top: 35px;
}
}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
With this same template on shields.ca is there a way to reduce the header height for smaller screens
say to:
#container_header {
height: 40px;
}
without the logo dropping out of position.

I have reduced the showcase margin for smaller screens 800 and below to
#container_slideshow {
margin-bottom: 40px;
}
with a media query, but have not figured out how to reduce the top margin of the showcase - firebug doesn't seem to grab it in any way.

I like the template, as does my client, but for smaller screens there seems to be too much scrolling.
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
All Good.... Thank you very much.
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Glen

1. Presuming I understand you correctly, you could try setting a max-width to your slideshow which would make it more manageable on higher res screens. To do so try adding the following to the Custom CSS field of your templates parameters (edit to taste).


#container_slideshow .wrapper960 {
max-width: 1200px;
}


2. For the slideshow to work correctly on all devices it really need more than one image. You could create a duplicate slide and set the transitions on the slideshow to 'fade' so it will continue to display what looks to be a single image. Alternatively you can simply place a single image in a 'Custom HTML' module in the same position.

4. To resolve may I suggest the following post on the subject.. http://www.joomla51.com/forum/8-commercial-templates/7284-side-col-stays-on-top-on-mobile-devices#17850

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


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

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.