: top_boxes code
: ujalal 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?

: Re: top_boxes code
: Tristan Rineer 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 (http://getfirebug.com/).

: Re: top_boxes code
: ujalal March 01, 2016, 01:55:21 AM

Ok will send an ngrok link tomorrow. However, the second issue is on the demo as well.

: Re: top_boxes code
: Tristan Rineer 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?

: Re: top_boxes code
: ujalal 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.

: Re: top_boxes code
: Tristan Rineer March 01, 2016, 02:02:43 PM

After looking at your site and the demo with Firebug (http://getfirebug.com/), 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:

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

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

Shape 5

Wordpress Club Themes => Fitness Center - Club => : ujalal February 28, 2016, 02:43:59 PM