Forum Support

Shape 5
March 28, 2024, 04:32:05 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1] 2
  Print  
Author Topic: Custom2 module position  (Read 1402 times)
coptechs
Jr. Member
**
Offline Offline

Posts: 145



WWW
« 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
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #1 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

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
coptechs
Jr. Member
**
Offline Offline

Posts: 145



WWW
« Reply #2 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
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #3 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

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
coptechs
Jr. Member
**
Offline Offline

Posts: 145



WWW
« Reply #4 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
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #5 on: May 08, 2017, 09:20:39 AM »

Hello,

Please post a url to where this occurs.
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
coptechs
Jr. Member
**
Offline Offline

Posts: 145



WWW
« Reply #6 on: May 08, 2017, 03:07:47 PM »

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

Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #7 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

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
coptechs
Jr. Member
**
Offline Offline

Posts: 145



WWW
« Reply #8 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
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #9 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

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
coptechs
Jr. Member
**
Offline Offline

Posts: 145



WWW
« Reply #10 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
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #11 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

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
coptechs
Jr. Member
**
Offline Offline

Posts: 145



WWW
« Reply #12 on: May 10, 2017, 06:28:50 AM »

Thanks. I'll give it a try.
Logged
coptechs
Jr. Member
**
Offline Offline

Posts: 145



WWW
« Reply #13 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
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #14 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

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1] 2
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
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.