Shape 5

Joomla Templates => Outdoor Life - Club => : coptechs April 29, 2017, 06:35:50 PM



: Custom2 module position
: coptechs 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.


: Re: Custom2 module position
: mikek 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;
   }

}


: Re: Custom2 module position
: coptechs 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)


: Re: Custom2 module position
: mikek 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="" />


: Re: Custom2 module position
: coptechs May 03, 2017, 10:39:06 AM
In custom.css I've put:

:
/* 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:

:
<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?


: Re: Custom2 module position
: mikek May 08, 2017, 09:20:39 AM
Hello,

Please post a url to where this occurs.


: Re: Custom2 module position
: coptechs May 08, 2017, 03:07:47 PM
On my test server still, I will PM you the URL.



: Re: Custom2 module position
: mikek 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.


: Re: Custom2 module position
: coptechs 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?


: Re: Custom2 module position
: mikek 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.


: Re: Custom2 module position
: coptechs 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?


: Re: Custom2 module position
: mikek 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.


: Re: Custom2 module position
: coptechs May 10, 2017, 06:28:50 AM
Thanks. I'll give it a try.


: Re: Custom2 module position
: coptechs 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.


: Re: Custom2 module position
: mikek 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.


: Re: Custom2 module position
: coptechs May 10, 2017, 05:25:59 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.

Worked to fix the problem. Thanks for the quick fix and all your help with this template.


: Re: Custom2 module position
: coptechs May 11, 2017, 08:24:09 AM
It appears that at the 1280 x 1024 and 1366 x 768 screen resolutions, the phone number and social icons are overlaying the last menu item (Location). Is there anything you can think of that I can do to fix? My only thought was to put 3 menu items to the left of the logo and only 1 to the right but then it looks unbalanced. Of course my client must be using one of those resolutions as he is reporting the problem and I have verified it.


: Re: Custom2 module position
: mikek May 11, 2017, 07:05:50 PM
Hello,

Your site is currently not loading, I keep getting a timeout error on the site. If those areas are overlapping that means you have too much content in that row; there is only so much room to display content. You would need to try and consolidate content/words for more space.


: Re: Custom2 module position
: coptechs May 12, 2017, 06:41:56 AM
Sorry, forgot to mention I made the site live at: mountainviewcottageslakegeorge.com (http://mountainviewcottageslakegeorge.com)

I thought since I had fewer social icons in custom_4, I could add that phone number in there and it would be ok. Guess I'll figure something else out if you don't have any other suggestions.