Forum Support

Shape 5
March 28, 2024, 10:13:03 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]
  Print  
Author Topic: S5 Photo Showcase in Ambient template  (Read 1397 times)
gabriela
Jr. Member
**
Offline Offline

Posts: 13



« on: July 20, 2015, 12:51:07 PM »

Hi
I installed S5 Photo Showcase for to replace the HTML module in home page, in top_row1_1 position. My problem is with mobile view. The module shows good the images and the text in desktop, but it shows the texts too big and high on the ipad and iphone, until they disappear from the picture frame. I think this must be something with css style, but I have the configuration's module in ""Plain text - Module adds styling" for to set my css style because when I set  "HTML - I will provide the styling" nothing shows. Please I need your help. The site is http://www.primusasesores.cl/
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #1 on: July 21, 2015, 07:40:06 AM »

Hello,

I don't see the photo showcase module published to your site. Please post a url to where the module is published.
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
gabriela
Jr. Member
**
Offline Offline

Posts: 13



« Reply #2 on: July 21, 2015, 07:41:18 AM »

The module is the first slideshow in home page: http://www.primusasesores.cl/index.php
« Last Edit: July 21, 2015, 07:49:55 AM by gabriela » Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #3 on: July 22, 2015, 07:37:58 AM »

Hello,

You have a class on your text that has a very large margin on the bottom:

.slideshow_tit {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #ffffff;
    font-size: 1em;
    font-weight: 600;
    line-height: 135%;
    margin-bottom: 153px;
    text-align: center;
}

That margin-bottom is almost as tall as the module itself on mobile screens so it's pushing it out of view.

I don't recognize this css, is this something you added? We don't provide support on custom css. If you're trying to align the text in the center there are several methods given here:

http://www.w3.org/Style/Examples/007/center.en.html
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
gabriela
Jr. Member
**
Offline Offline

Posts: 13



« Reply #4 on: July 27, 2015, 08:58:47 AM »

Thanks, I have reviewed the css you indicate me and I corrected some errors with width and height.
That was one of many attempts to find the css to fit the text.
I modified the style also compared with the style html css demo video module on the homepage.
I used the style demo "video_overlay_text_wrap_inner" for the div, but not the style for text h2, behold used its own style.

.video_overlay_text_wrap_inner {
    margin: 0;
    position: absolute;
    top: 0%;
    transform: translate (0px, -50%);
    -ms-transform: translate (0px, -50%);
    -webkit-transform: translate (0px, -20%);
    text-align: center;
    max-width: 80%;
    Color: #FFFFFF;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}


I do not know how to make the text is responsive and call certain styles in s5.responsive.css as "media screen and (max-width: 579px)."
I need that texts more smaller in view of the iphone.
One thing strikes me: In the demo slideshow S5 Photo Showcase, the texts do not fit, they disappear, please look at: http://www.shape5.com/demo/photobox/index.php/extensions/s5 -Photo-showcase
Does the slideshow has a disability with texts ?.
I need texts look smaller in the slideshow at the phones.
Furthermore, in normal view slideshow I need texts more above. I can not set it better because it deconfigure view in iphone.
Thanks, I hope your help!
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #5 on: July 28, 2015, 07:27:04 AM »

Hello,

The text was stylized to disappear on the Photobox template for mobile, but that's specific to that template.

We don't provide support for customizing the look of the module. If you just want to reduce the font size you can do something like this:

@media screen and (max-width: 970px){
#s5_photo_showcase_conent_wrap_inner2 {
font-size:0.7em;
}
}

You can add that to custom.css. Just make sure you are using "em" font-sizes on your content.
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
gabriela
Jr. Member
**
Offline Offline

Posts: 13



« Reply #6 on: July 28, 2015, 07:54:36 AM »

Yes, I'm using "em" font size.
How can I disable  the text for to show in devices? I don't want to have more problems.
Thanks!
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #7 on: July 29, 2015, 07:33:40 AM »

Hello,

You can use a display:none call for the ID of the text that you want to remove within your own set media query width.

@media screen and (max-width: 970px){
#s5_photo_showcase_conent_wrap_inner2 {
display:none;
}
}
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
gabriela
Jr. Member
**
Offline Offline

Posts: 13



« Reply #8 on: July 29, 2015, 07:56:42 AM »

O.K! Thanks you very much!
Logged
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.