Must Read: New Unified System is officially live Must Read     |   11 Templates & 4 Extensions Updated Read more

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.

UTAFITI - Mobile View Issues

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

Hey - So the site dontageva.com is up and running, but I noticed some of the mods I have running look weird. How do I get the pics to be full size of the width of the mobile device? If you notice here...


IMG_5248.PNG


The images are tiny. I'm sure it's a simple setting, but I've played around with various settings and haven't been able to figure it out. Help!

Thanks,
Nader :)
  • azzaya's Avatar
  • azzaya
  • 12 Month Developer
  • 276 posts
  • 5 Thanks
  • Karma: 2
The administrator has disabled public write access.
Hi Nader,

I'm looking on my android and it looks like you are now hiding the image content?

Cheers
Paul
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul, I hid it on the homepage because it didn’t look good. A separate grid mod is enabled on the subpages. Here’s an example dontageva.com/index.php/services/medical-aesthetic-services/dermal-fillers

I have it listed as stacked and in the mod set it to expand the width of the container.

Thanks,
Nader
  • azzaya's Avatar
  • azzaya
  • 12 Month Developer
  • 276 posts
  • 5 Thanks
  • Karma: 2
The administrator has disabled public write access.
Hi Nader,

Can you try adding

@media screen and (max-width: 420px) {
.utafiti-latest-news .zt-image {width: 100% !important;margin-right: 3% !important;}
}

@media screen and (max-width: 420px) {
.utafiti-latest-news .zt-item-container {width: 100% !important;margin-left: 0% !important;}
}
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
If you are using the module class elsewhere on the site you might need to add the module ID to the css

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

Thanks so much. That worked! One last thing with mobile view is the following... the first slideshow banner image, the text runs long and in the others it just shows the header and not the text (the way it should be I assume because of screen size). also the last tab below the banner is shorter than the others when i'm on an ipad for some reason and even when i tilt my screen horizontally. Thoughts?


IMG_5252.PNG


Thanks!
Nader
  • azzaya's Avatar
  • azzaya
  • 12 Month Developer
  • 276 posts
  • 5 Thanks
  • Karma: 2
The administrator has disabled public write access.
Hi Nader,

With the tab on the slideshow you will need a media query to adjust for the fact that the link drops to two lines

@media (max-width:870px) {
.utafiti-slideshow-hero .cd-slider-nav li a {min-height: 8em}
}

Would be one option to test
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
actually

@media (min-width:420px) and (max-width:870px) {
.utafiti-slideshow-hero .cd-slider-nav li a {min-height: 8em}
}
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
For the text you have the first slide in a h2 tag which complicates the problem a little

@media (max-width:700px) {
.utafiti-slideshow-hero .zt-hero-wrap .zt-text-intro {maxwidth:100%;}
}

would a style I'd add you have a width adding 43% at the moment
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
If you remove the tag that is applying to the first slides content I think it will then only display the title

Cheers
Paul
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul, I removed the tag, but it was still displaying oddly, so I toggled to the html editor and noticed I didn't strip all of the extra junk code that comes along with copying and pasting from a word doc directly into a Joomla article. I usually paste into Notepad before I paste it into an article for plain text. That one must've slipped past me. Either way, after I cleaned it all up (it had unnecessary divs etc.), even with the <h2> tag, it is now working properly :)

Thanks for all your help. You're seriously my hero lol. Much appreciated!

Nader
  • azzaya's Avatar
  • azzaya
  • 12 Month Developer
  • 276 posts
  • 5 Thanks
  • Karma: 2
The administrator has disabled public write access.
Thanks Nader
  • paulus103's Avatar
  • paulus103
  • 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