Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

@ screen media only

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Hi - I've got a problem viewing www.bizzybounce.co.uk/newsite on some mobile platforms.
On my iPhone 3 in landscape mode the site is thrown over to the left, and doesn't fill the width of the screen. It's fine in portrait.
Viewing in Chrome, the same thing happens on some tablets, iPhone 6 in portrait mode and iPads for example.
Not sure where to start looking for a solution for this one.
Anyone any ideas?
Thanks
Ian
  • ianpanorton's Avatar
  • ianpanorton
  • 6 Month Developer
  • 1258 posts
  • 3 Thanks
  • Karma: 7
The administrator has disabled public write access.
Hi Ian,

I'd look at this media query first

@media only screen and (max-device-width: 1024px) and (min-device-width: 768px)
body {
width: 495px;
}

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul - thanks for getting back to me, and sorry for the slow reply. It's been one of those days!
I'll look at this again tomorrow.
Meanwhile, do you know how to change the text in the top right panel?
I've found this:
<a class="open-panel" href="#" data-target="zen-panel-1"> Open</a>
But I don't know how or where to edit it…
Thanks
Ian
  • ianpanorton's Avatar
  • ianpanorton
  • 6 Month Developer
  • 1258 posts
  • 3 Thanks
  • Karma: 7
The administrator has disabled public write access.
Hi Ian,

If you open up the template settings and click Theme on the left and then Hidden panel at the top

In there you can change the setting for this

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Thank you Paul. - I didn't think to look in the obvious place!
  • ianpanorton's Avatar
  • ianpanorton
  • 6 Month Developer
  • 1258 posts
  • 3 Thanks
  • Karma: 7
The administrator has disabled public write access.
No probs

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
And thanks for the media query tip.

Both iPads and iPhones were set to a fixed width which wasn't working. Changing the width to auto seems to have sorted it out.

I copied the table from a Google search. Any idea why the widths would have been fixed?

The only platform where it's not working now on Chrome is the Kindle Fire HDX, where the screen is 2560px. Any ideas?

Thanks again

Ian
  • ianpanorton's Avatar
  • ianpanorton
  • 6 Month Developer
  • 1258 posts
  • 3 Thanks
  • Karma: 7
The administrator has disabled public write access.
Hi Ian,

Sorry I can't seem to remember why this was a problem

Given that screen size is huge is that width covered in the media queries?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul - sorry if I'm confusing you as well as me. Problem all solved now apart from the huge kindle fire.

I've got this in custom.css, but it doesn't help:

@media screen and (max-width: 2560px) {
body {

width:auto;
}
}

Thanks

Ian
  • ianpanorton's Avatar
  • ianpanorton
  • 6 Month Developer
  • 1258 posts
  • 3 Thanks
  • Karma: 7
The administrator has disabled public write access.
Hi Ian,

with this media query what are you looking to do?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
HI Paul - I'm trying to make the site fill the screen on the Kindle Fire HDX, where the screen is 2560px.
Struggling again today…
Thanks
Ian
  • ianpanorton's Avatar
  • ianpanorton
  • 6 Month Developer
  • 1258 posts
  • 3 Thanks
  • Karma: 7
The administrator has disabled public write access.
Is it sitting in the center of the screen with the width of the container?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul - screen shot attached.

Thanks

Ian

kindle.jpg
  • ianpanorton's Avatar
  • ianpanorton
  • 6 Month Developer
  • 1258 posts
  • 3 Thanks
  • Karma: 7
The administrator has disabled public write access.
Hi Ian,

Just curious but are your clients actually using this device?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul - that's highly unlikely! I just don't like it when things don't work properly. If there's no easy fix it's not worth worrying about.

This site is turning into a nightmare for me - the client is changing his mind and my mind has gone into a sort of grey slush. I'm forgetting the few bits I did know and struggling with the simplest of concepts.

I think I might down tools and go to the pub :-)

Thanks for all your help so far. Unfortunately I'll be back next week - or possibly before - with some more silly questions.

Enjoy any time off you can grab - tomorrow is supposed to be good weather…

Ian
  • ianpanorton's Avatar
  • ianpanorton
  • 6 Month Developer
  • 1258 posts
  • 3 Thanks
  • Karma: 7
The administrator has disabled public write access.
Enjoy the pub :)

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers