Forum Support

Shape 5
September 21, 2021, 07:56:03 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: top_boxes code  (Read 526 times)
ujalal
Jr. Member
**
Offline Offline

Posts: 69



« on: February 28, 2016, 02:43:59 PM »

Hi there,

I have a couple issues I am dealing with the top boxes code. I have attached the code.
1) I have a requirement to hide initial button, display certain content and a new button only if button is clicked. Is there a way to keep the header I am using (h3) fixed at the top of the image so it doesn't slide up when the content is displayed? Also, the when I hide the button there is a lag in it being hidden. Is there a way to avoid this lag? Finally, is it possible to hide the button as I am already doing and then have the content move up? I can give you a link to the site tomorrow.
2) The first top box gets cut off when the page is being viewed on mobile device (iphone in landscape mode) or on an ipad (in portrait mode). I checked the demo and the same problem exists there. How do we fix this?
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #1 on: February 29, 2016, 09:00:18 AM »


Please remember to always post a link to your site when having issues with something on the front-end; I can't even begin to diagnose the cause of a problem if I can't see what's happening and inspect the code with Firebug.
Logged

Tristan Rineer
------------
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
ujalal
Jr. Member
**
Offline Offline

Posts: 69



« Reply #2 on: March 01, 2016, 01:55:21 AM »

Ok will send an ngrok link tomorrow. However, the second issue is on the demo as well.
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #3 on: March 01, 2016, 08:48:17 AM »

Everything on the demo looks fine to me.  Can you provide a screenshot of the problem you are having?
Logged

Tristan Rineer
------------
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
ujalal
Jr. Member
**
Offline Offline

Posts: 69



« Reply #4 on: March 01, 2016, 12:02:35 PM »

Here is a link to our site - http://b31f1ca2.ngrok.io/wordpress_crossfit/

I will send an image now.

The issue on your demo as well as my site are that the top boxes (the three images) under the main slide image fader component in custom 3 when shown in landscape mode on mobile device (iphone in this case) or ipad portrait the first image gets cut off and is not displayed.





Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #5 on: March 01, 2016, 02:02:43 PM »

After looking at your site and the demo with Firebug, it appears that what is happening is an intentional part of the design.

If you look at {themedir}/css/s5_responsive.css, you will find the following code:

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

That says that the code following it will only apply when the screen is less than 970px wide. 

At around line 43, this code is also included:

Code:
.top_box {
width:50%;
}

.top_boxes .top_box:first-child {
display:none;
}

The second bit of code makes the top_box class 50% width, then sets the first box to not display.

If you want to change this behavior, you can just remove or comment out the second block of code given above.
Logged

Tristan Rineer
------------
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]
  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.