Forum Support

 
Advanced Search


[1] 2

Offline coptechs
Free Member
Posts: 145 WWW
Posted on: April 29, 2017, 06:35:50 PM

I am using the custom_2 module position to overlay some text on an image. However, I've noticed that once the resolution goes down below 1366 x 768 and also on most mobile views, the top of the text either overlays the logo or doesn't all display - see screenshots here: https://docs.google.com/document/d/1l3tuywoizGqo2Tcj_Qgxf53kxzXE8LrphBbs0uTJCqA/edit?usp=sharing.

One of the things I thought might help was if instead of stacking my content, putting the address to the left of the "Ready To Vacation?" text and the phone numbers to the right?  Do you think that would do the trick? If so, how would I need to adjust the code?

If you have any other suggestions to resolve the issue, I am certainly open to them. Thanks in advance.
Logged

Offline mikek
Free Member
Posts: 28743 WWW
Posted on: May 01, 2017, 07:25:07 AM

Hello,

That is because the area is set to the dimensions of the image itself. Images stay in ratio, so as you reduce the screen the height of the image reduces along with its width. Which means you have less and less height to work with as the screen gets smaller. What you need is a height call and max-width call at certain height so it never gets shorter. However, the flip side is that the sides will start to cut off; there's no way around that since it has to stay in ratio.

Css like this would work, but I don't know the ID of the image you are using:


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

   #your_image {
      height:700px !important;
      max-width:100000000000px !important;
      width:auto !important;
   }

}
Logged

Offline coptechs
Free Member
Posts: 145 WWW
Posted on: May 01, 2017, 07:31:29 PM

Where would I insert that CSS? And by image ID, do you mean filename? (dock_placid_lake.jpg)
Logged

Offline mikek
Free Member
Posts: 28743 WWW
Posted on: May 02, 2017, 07:14:24 AM

Hello,

You would put it in custom.css.

Your image must have an ID, not the filename. Like this:

<img id="your_image" src="" alt="" />
Logged

Offline coptechs
Free Member
Posts: 145 WWW
Posted on: May 03, 2017, 10:39:06 AM

In custom.css I've put:

Code:
/* Add your own custom css to this file. You may wish to use css !important calls to override css from the template css files.
----------------------------------------------------------- */
@media screen and (max-width: 1200px){

   #homepage_image {
      height:700px !important;
      max-width:100000000000px !important;
      width:auto !important;
   }

}

Then in the module I am using for the image, I have:

Code:
<p><img id="homepage_image" img src="images/dock_placid_lake.jpg" alt="dock placid lake" /></p>

But it isn't working. What am I doing wrong?
Logged

Offline mikek
Free Member
Posts: 28743 WWW
Posted on: May 08, 2017, 09:20:39 AM

Hello,

Please post a url to where this occurs.
Logged

Offline coptechs
Free Member
Posts: 145 WWW
Posted on: May 08, 2017, 03:07:47 PM

On my test server still, I will PM you the URL.

Logged

Offline mikek
Free Member
Posts: 28743 WWW
Posted on: May 08, 2017, 07:46:32 PM

Hello,

I checked your site and I am not seeing any issues on smaller screens. The css is applying as it's supposed to, keeping your image at minimum height. Make sure you clear your browser cache.
Logged

Offline coptechs
Free Member
Posts: 145 WWW
Posted on: May 09, 2017, 02:43:56 PM

Ok, I see what you are saying now.

How can I fix the custom4 position though so the phone number, Facebook and Trip ADvisor icons aren;t cut off at the top?
Logged

Offline mikek
Free Member
Posts: 28743 WWW
Posted on: May 09, 2017, 05:57:15 PM

Hello,

That area isn't designed for mobile, but you could try something like the following

@media screen and (max-width: 900px){
#s5_login_custom_4_wrap {
margin-top:100px !important;
}
}

You may need to adjust the 900px trigger.
Logged

Offline coptechs
Free Member
Posts: 145 WWW
Posted on: May 10, 2017, 05:51:08 AM

Is there any way of knowing what positions are not designed for mobile? That would be helpful.

I guess another option would be to hide that position on mobile and utilize another position for that module that is mobile friendly?

What would you consider best practice?
Logged

Offline mikek
Free Member
Posts: 28743 WWW
Posted on: May 10, 2017, 06:13:46 AM

Hello,

The css I gave you above should make it work on mobile, it will push it down some so it's not cut off by the mobile nav bar. Typically the positions not meant for mobile are automatically hidden on our demo and site shapers, but this position isn't shown, it's just an available position so you wouldn't see it in either of those places unfortunately.
Logged

Offline coptechs
Free Member
Posts: 145 WWW
Posted on: May 10, 2017, 06:28:50 AM

Thanks. I'll give it a try.
Logged

Offline coptechs
Free Member
Posts: 145 WWW
Posted on: May 10, 2017, 07:45:06 AM

That works nicely.

But now I notice that since the top menu bar doesn't get shown, the user doesn't see the name of the business/site or its logo anywhere when they land on the homepage in mobile/responsive mode. Is there anyway to either display the business name instead of "Home" in the top responsive bar or put a small version of the logo next to it?
I was going to put the logo in a module position and use it only for mobile but it doesn't appear there is one available that would display prominently.
Logged

Offline mikek
Free Member
Posts: 28743 WWW
Posted on: May 10, 2017, 01:59:45 PM

Hello,

Actually that is a bug, the logo should show at all screen widths. I have fixed that on the latest downloads:

https://www.shape5.com/component/option,com_docman/Itemid,96/task,cat_view/gid,346/

Please download the template zip file and use the latest template.css and index.php file to rectify this.
Logged
[1] 2

Jump to:  


Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Page created in 0.03 seconds with 20 queries.
Need some help getting your site up and running? Be sure to check out our tutorials area, post on the forum or hire us
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.