Jump to content

Search the Community

Showing results for tags 'Responsive'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Found 39 results

  1. Is there a way to disable the responsive function of your iBoxes? I do not want all iBoxes underneath each other on mobile, is there a way to fix columns or group boxes? I use them for small links and want them to stay next to each other, see attachment Please let me know.
  2. [Solved] responsive problem

    Hi, I use on my home page " impulse module " but when i look on my iPhone the image is cut and not responsive . i only have this problem with this module not with the other one . thanks for ur help website / www.elonakane.com Lionel
  3. Problem with responsive function

    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.
  4. I have woocommerce store, product shows title and price fine until reduce screen with on a tablet/mobile phone the price and title gets removed? Any ideas? Here's an example page: https://thelaptopfixers.com/product/operating-system-re-install/ Try it on both desktop PC browser then resize to mobile/cell phone size! Thanks
  5. Hi, I desperately need to deactivate the responsive function on mobile for reasons. It looks so messy with the responsive look on mobile and not navigating or informative at all as it is. I searched for solutions online and tries some of those that I found but nothing worked out. Also I found a previous post on this forum says that this theme pagelines DMS is not meant to be build to deactivate the responsive function... Also tried with widget such as WPtouch to edit the mobile look a little more informative but as I am using "single page" theme on pagelines, the frontpage(main page) never appears on those app. Seems like not compatible? If there is no way to deactivate responsive function or I'll have to recreate another page just dedicated for a mobile page? or change the theme completely and build a page from scratch? I have been searching for this for two days already... Could anyone wise and kind out there, please help me? Thanks,
  6. Control of Vimeo embed sizing

    Hi there, I'm a big fan of Pagelines, and have been for years. I'm trying to control the size of video embeds and having some difficulty. I see that I can just paste the Vimeo video URL into the post and an embed widget will automatically appear, which is great. But the embed box created is much taller that the video (689 x 1000 pixels) so the content sits in the middle of a tall black box, which looks awkward. I tried using the full iFrame embed code from Vimeo, which solved the disproportionate embed frame size (or aspect ratio) issue, but despite specifying the dimensions I want (690 x 388), the videos displayed on the post are sized at 300 x 150 pixels. I can't work out how to change either. I'm using the latest version of Pagelines Framework (Pro) with the Agency them. Any help or advice very much appreciated. Thanks, Dougal
  7. Section Width on Mobile (iPhone issue)

    Hi, so I have an issue that seems specific to iPhones. I have 2 "Menus" in a container both set to 6 columns (see image A) - I have added the classes .menuleft and .menuright When this gets to 768px and the mobile menu kicks in, both sections revert to 12 columns (or 100% width) so the 2 menus are stacked on top of each other. I want them to remain inline so that they look like image B - so need to control the section width. I have added the following CSS: .menuleft[class*='pl-col-'] { max-width: 22%; margin-left: 3%; padding-right: 0em; padding-left: 0em; float: left !important; } .menuright[class*='pl-col-'] { max-width: 74%; margin-right: 1%; padding-right: 0em; padding-left: 0em; float: left !important; } This works well for Android phones, on all online emulators and in Chrome mobile inspector, but does not seem to work on iPhones. I don't have an iPhone so it's very hard to test. Any help would be appreciated. The site is currently live at quitegoodcards.com. PS Is there a way to target the li items in the mobile menu toggle (image C) that does not effect the desktop li? There doesn't seem to be a separate class to apply. Thanks in advance
  8. Masthead Video

    I cannot find a way to get this video: http://vimeo.com/66286070   To autoplay at 100% in the Masthead.   Please assist.   Thank you.    
  9. The responsive mobile theme built into pagelines is excellent, but there's one thing I'm curious about.    I see that content-width, when viewed from a mobile device, is 100% of the width. And that's great. But many of my readers say that they can't zoom in on pictures. Is there any way to enable them to zoom when viewing from their phone? thanks!   if so, could you point me in the right direction as far as CSS selectors and/or anything else you might be familiar with?
  10. CSS by screen size?

    On this site I'm developing I am using this snippet of CSS to adjust the position of text in my fixednav. .navbar .navline { position:relative; left:-29px; !important; } It works perfectly on a desktop sized browser window. However, when the window drops in size and reflows for mobile viewing, the menu items begin off to the left of the screen. About 29px to the left, I'd guess. The question is - I don't know much about responsive design. Is there a way to specify that this piece of custom CSS should only apply ABOVE a certain page width? Thanks for ideas! -CP
  11. When I resize my browser to test the responsive version of the site I am working on, the white text appears on the slide (it should not). I have checked my options and they appear to be correct. Screenies: https://www.dropbox.com/s/yzvnyxg4o0quf7m/Screen%20Shot%202013-06-01%20at%2010.21.31%20AM.png https://www.dropbox.com/s/yblmqpvzx0kwz98/Screen%20Shot%202013-06-01%20at%2011.24.42%20AM.png BETA Site: http://goo.gl/eSjqF Stumped....
  12. Hi All, I currently have a portfolio website that I am rebuilding with wordpress+pagelines. I want to keep the overall design and just upgrade my graphics and capabilities. This is my current site : http://casseysdesigns.com This is my wordpress site : http://casseysstudioofdesigns.com I want to have the header and footer background expand across the entire page no matter what size... I would like the content of the header and footer to remain within the content area (This is how I have it set up on my current website via css) The problem is that even using developer tools and updating my style.css in my child theme the parent theme (pagelines) is overriding my styles and I can't get the header and footer bgs to extend. I tried a bg img that has a black bar across the top as a "fix" but it doesn't solve the problem for the footer and it doesn't respond the way I want it to on different sized screens. Any help would be greatly appreciated! If you need more information to assist me please let me know! Thanks, Cassey
  13. I wanted to even see if this was possible... Is there a way to have the collapsible nav without having the collapsible website. When on a mobile device, I feel like it would be ideal to use the collapsible nav, but would love to maintain the responsive non mobile site below that nav. Does that make any sense? Not all that literate in what makes the site become responsive. If anyone could let me know their thoughts, much appreciated. John
  14. I have a section of a site that is set up to have a 6 column grid using the span2 class. When I resize the browser window, the span2's respond and resize, but the h2's within them stay the same font size, which eventually forces them to overlap. Why isn't the font resizing with the columns/ How can I make the text resize? The h2 styling is currently being applied via a .less file with the following code: h2: @baseFontSize * 1.9; @baseFontSize: 20px; You can check it out at: http://varsity.wpengine.com/what-we-do/ It's the numbered section at the top of the page. Thanks in advance!
  15. Header & Footer - Responsive BG image

    Hi, I make a background image in header and footer, how to make responsive it? I try use the "max-width" and "min-width", but it's not work correct and try to change "px" to "%" nothing works.. Thank you!
  16. Site not responsive

    Hello, I'm using Pagelines framework with the responsive setting in the layout editor checked but it does not look responsive when viewed on my mobile. What can I do to correct this? Thanks so much, Kelli
  17. Hi, I just bought Simon's hook plugin and just used it. Nice and simple. As I'm building my site the goal is to push the design but keep it mobile friendly. It was looking great on iPhone until I added a hook to get a custom image in my header template (the girl in upper right) http://shopthehip.com/dev2012/ Now looking at my mobile the branding logo is out of place and the girl covers the navbar. Should I stay away from hooks then? Or is it better instead to use Drag & Drop to add a section in the header?
  18. When resizing a browser window, I notice the banner image displays below/after the banner text. How can I get the image and then the text? I want this: -image -heading -text Instead of this: -heading -text -image Thank you.
  19. So I had a brainstorm this morning and thought that it would be great to have within Pagelines, the ability to add in the responsive utility classes (from Bootstrap) for each section. So for instance, if you wanted to set up the boxes to only show when viewing via desktop, you can select a dropdown "visible-desktop." I envision this being a selection in many places around the Pagelines site options, but especially in the Page Options and in the meta setting for each page/post. My $.02
  20. I have a simply responsive layout like this. The problem is if I try to add a 2px border all around class "block_bkgd", it messes up the grid layout. What is the best CSS tips for fixing this problem? Thanks!
  21. Issues with Viewer plugin

    Here are the issues I've noticed with Viewer and wondering if it's just my site or if anyone else has experienced or can re-create the same issues. 1) I have Viewer (gallery shortcode) in pl_tabs and it seems the very first time I try to load the page, the Viewer plugin displays the error message (sometimes it works on the first try but most times it doesn't). If it doesn't work the first time (and sometimes a 2nd time), eventually Viewer works after 1 or more page refreshes. 2) When I'm on the "Viewer" or "Photos" tab (whatever you want to call yours when testing), it is responsive and looks good. However, when another tab is active and I resize the browser window and then I switch back to the "Photos" tab, there's no Viewer, no images, and no error message. It's like the tab content is empty. Refresh the page and click on "Photos" and it's back again. Here's a demo video (no sound) of both issues: http://screencast.com/t/LfkXAMGKH Here's an example of my using Viewer within pl_tabs: http://tourkick.com/3280/ FYI: I haven't tried it outside of pl_tabs shortcode. Thanks.
  22. Help with responsive divs

    Hi. I am wondering if someone can help me. I have some buttons on a page in my site that are driving me crazy. Here is the page: http://mattro.se/contact/ The Linkedin and Instagram buttons (divs) are supposed to be side by each, and continue to be side by each until the browser is so small that the containing div slips under the message box. Right now, the 'linkedin button is slipping under the IG button long before the containing div slips under. Can someone PLEASE show me what im doing wrong here? Here is the page code: <div class="row"><div class="span12 well"><h1 class="contact">Pen me a letter</h1>[contact-form-7 id="460" title="Contact form 1"]</div> </div> <!--THIS IS THE CONTACT FORM 7 CODE--> <div class="row"><div class="span4"> <p>Name (required)<br /> [text* your-name] </p> <p>Email (required)<br /> [email* your-email] </p> [checkbox WorkEnquiry "Work Enquiry"] <p>Subject<br /> [text your-subject] </p> <p class="hidden-desktop">Message [textarea messagemobile]</p> <p class="hidden-desktop">[submit "Send"]</p></div> <div class="span8"><div class="phone well hidden-desktop hidden-tablet"><a href="javascript:void(0)" onclick="window.location='tel:+12505807673'" title="Call me" class="tel"><h1><em class="icon-phone icon-2x"></em></h1></a></div> <div class="row contact"><div class="span6 instag well"><a href="http://instagram.com/matroas" target="blank"><h1><em class="icon-camera-retro icon-2x"></em></h1></a></div> <div class="span6 linkedin well"><a href="http://ca.linkedin.com/in/matroas" target="_blank"><h1><em class="icon-linkedin icon-2x"></em></h1></a></div> </div> <p class="fredquote hidden-phone hidden-tablet">"The connections we make in the course of a life - maybe that's what heaven is. We make so many connections here on earth. Look at us; I've just met you, but I'm invested in who you are and who you will be, and I can't help it." ~ Fred Rogers</p> </div> </div> <p class="hidden-phone hidden-tablet">Message<br /> [textarea your-message] </p> <p class="hidden-phone hidden-tablet">[submit "Send"]</p> And here is the pertinent CSS: .row.contact { min-width:100px; } .linkedin.well { margin:21px 5px; min-height:0; padding:0; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; position:relative; min-width:50px; } .linkedin.well:hover { background:DarkSeaGreen; -webkit-transition: all 0.25s; -moz-transition: all 0.25s; -ms-transition: all 0.25s; -o-transition: all 0.25s; transition: all 0.25s; } .linkedin.well:hover h1 { -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; color:white; } .linkedin.well h1 { margin:0; text-align:center; color:DimGray; } .phone.well { margin:21px 5px; min-height:0; padding:0; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; } .phone.well:hover { background: blue; -webkit-transition: all 0.25s; -moz-transition: all 0.25s; -ms-transition: all 0.25s; -o-transition: all 0.25s; transition: all 0.25s; color:white; } .phone.well:hover h1 { -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; color:white; text-align:center; } .phone.well h1 { margin:0; text-align:center; color:DimGray; } .instag.well { margin:21px 5px; min-height:0; padding:0; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; min-width:50px; } .instag.well:hover { background: DarkOliveGreen; background: Tan; -webkit-transition: all 0.25s; -moz-transition: all 0.25s; -ms-transition: all 0.25s; -o-transition: all 0.25s; transition: all 0.25s; color:white; } .instag.well:hover h1 { -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; color:white; text-align:center; margin:0; } .instag.well h1 { margin:0; text-align:center; color:DimGray; } p.fredquote { font-family:'Reenie Beanie', cursive; font-size:26px; color:grey; padding:0 0 20px 0; line-height:1.5em; } h1.contact { font-family: 'Pacifico', cursive; text-transform:none; font-size:55px; margin:0 0 15px 0; font-weight:lighter; color:DimGray; } Please help!! Thanks so much! -m
  23. I love the options in your framework - great variety - great tools. I have one suggestion that would really take it through the roof. Please adjust one of your slideshows (quickslider, features etc.) to play videos and responsively stop when the video is played. Right now, quickslider stops with interaction but won't play videos; and features plays videos but won't stop with interaction. I would really love this feature. Pretty please, -James
  24. Hi, I've got a static image placed next to a small JW Rotator slider (from Next Gen Gallery). This forms a block of images directly below the main navbar and is sitewide. When loaded in iOS (and I'm guessing any small screen) the JW Rotator drops down to the next block, and the image stays up top where it should be. Is it possible to write CSS that will keep the image and the JW Rotator together, and shrink them down responsively as needed on small screens? This can be viewed at seasonshospice.org Here's the CSS I'm using right now: /* below main nav image */ .wp-image-103 { position: relative !important; left: 5% !important; } /* Positions JW Rotator Flash Slider (is a conflict with NGG slider on video page)*/ #page .slideshow { margin-left: 41.2% !important; margin-right: auto; margin-top: -10.4% !important; outline: medium none; } Thanks for any help you may be able to offer! Best, Bruce
  25. Hi there, As you can see here, I would like to understand why my Standard Navbar doesn't change when viewed on iPad portrait mode (768x1024 pixels)? I know I have to find the correct trigger (@media) and change the width value (as James advised me on PageLines Plus chat yesterday) but after spending almost two hours into PageLines compiled CSS, I can't figure it out... Any help please? Jean-Philippe