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...




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

Hi Nader,

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

Cheers
Paul

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

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;}
}

If you are using the module class elsewhere on the site you might need to add the module ID to the css

Cheers
Paul

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?




Thanks!
Nader

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

actually

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

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

If you remove the tag that is applying to the first slides content I think it will then only display the title

Cheers
Paul

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

Thanks Nader