Jump to content

Archived

This topic is now archived and is closed to further replies.

Claude203

Need Some Help Formatting Testimonial Box for Mobile

Recommended Posts

Claude203

I would like to format the Testimonial Box for mobile devices, considering that the container is a dynamic section. 

 

Aside from targeting the specific elements in the @media section, is there anything else I could use to affect the dynamically changing shape?

 

@media only screen and (max-device-width: 700px) {

?

?

}

 

Thank you!


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
Danny

Hi,

 

If you want to change how a section or element displays on mobile devices, you will need to use a media queries and use the classes used in that element to target it. There is no other way to do this.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Claude203

Thanks, yes I understand. And I am trying that. But I still can't find the way yet. Here is what I have so far:

 

@media only screen and (max-device-width: 700px) {
.row > [class*="span"]:first-child, .row > section:first-of-type, .row .sortable-first, .row-fluid > [class*="span"]:first-child, .row-fluid > section:first-of-type, .row-fluid .sortable-first, .editor-row > [class*="span"]:first-child, .editor-row > section:first-of-type, .editor-row .sortable-first, .row-no-response > [class*="span"]:first-child, .row-no-response > section:first-of-type, .row-no-response .sortable-first {
margin-left: 0;
clear: both; }
}
 
Trying to familiarize myself with the fluid concepts, and have not yet figured out what in the above CSS to change so that the mobile testimonial box (or the main testimonial box for that matter) does not have so much extra space at the bottom for those testimonials that aren't as long as prior ones that need that space. In other words, is it possible to dynamically change the padding?
 
If this is a deeper programming question then I would be happy to take it up elsewhere or contract the services of a programmer/specialist off line. 
 
Thanks!

Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
Danny

We have already discussed this in a previous topic, you can not dynamically change margin/passing of an element with CSS. To do this you're likely going to need to use JavaScript. Please be aware that what you're trying to achieve is considered extensive customization and this isn't something we provide support for.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Claude203

Thanks, yeah I forgot about that. Apologies. 


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
Claude203

PS–Is anyone else aware of any other "responsive height" testimonial sections? The ones offered so far by PageLines and their partners are not. Thanks.


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites

  • Similar Content

    • sakkthi subramaniyam
      By sakkthi subramaniyam
      Working on a very old site which has  pagelines framework theme. I need section plugin. so i can install postpins section. I have lost backup copy.
      Thank you.
    • elementalkites
      By elementalkites+
      Good evening. I am attempting to use the Impulse section on a page I am working on (https://dev.elementalkites.com). The tool seems to have the ability to overlay a logo on top of the slider images but in my case it isn't working, even though I have added the logo file and given it a height to display at. I have attached a screenshot for reference. Any help would be appreciated.
       
       
    • dwpoyner
      By dwpoyner+
      Not sure exactly what is causing the issue. For some reason, why you view my site on mobile, the menu does not show up. It will pop up, but it is black. You can check it out here: http://dev.caryfbc.org. I'm also attaching a screenshot where I shrunk my browser down. Any suggestions?

    • jojoking
      By jojoking+
      I have to admit to being baffled.
      I'm trying to embed a video (from my WP media library) within a WP post using the videobox section shortcode.
      The shortcode section popup only allows two items to be configured - the section type, in this case videobox - and a unique id. There's no URL or other parameters such as autoplay or loop which are available within the Pagelines editor.
      Whatever I put in the unique ID makes no difference to what is shown which seems to be a default video with stars or white noise on a black background.
      I assume I need to define this ID somewhere else, or maybe WP has done it for me?
      HELP!
       
      PS This is the page source generated when a shortcode is added within the WP post editor
      <!-- VideoBox | Section --> <section id="videobox_1675853156" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="1675853156" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="280414138" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/plugins/pl-section-videobox/default.mp4?r=280414138" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#280414138')[0].load(); </script> </div> </div></div></section> </div>  
      If I add a videobox section using the Pagelines page editor the page source generated includes my video:
      <!-- VideoBox | Section --> <section id="videobox_udvu4uz" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="udvu4uz" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="429558737" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/uploads/2017/04/HIHWelcome.mp4?r=429558737" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#429558737')[0].load(); </script> </div> </div></div></section>  
    • kwaoru
      By kwaoru
      Hi,
       
      I have been using DMS and pagelines.
      I am facing to a huge trouble with the appearance of one of my page on mobile (smart phones) built with pagelines.
      However I haven’t come to any solutions to organise either edit the appearance of mobile view to look neat or deactivate the responsive function. 
      Now it looks totally messy on the phone...
       
      1. Is there any way to edit the appearance of the mobile version (responsive theme)?
      2. Is there any way to deactivate responsive function?
       
      If I could receive support from you to go thorough this process I would be happy to be a pro member. 
       
      Looking forward to hearing from you.
×