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 32 results

  1. Responsive Youtube Embed

    Hi there, I have in my home a YT Video embed with the pagelines plugin but when i see the page with my iphone, all is responsive but not the video! Any solution please? Site: www.stefanoferruggiara.com
  2. 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.    
  3. 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?
  4. 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
  5. 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....
  6. 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
  7. 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
  8. 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!
  9. 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!
  10. 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
  11. 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?
  12. 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.
  13. 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
  14. 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!
  15. 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.
  16. 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
  17. 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
  18. 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
  19. 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
  20. Hello All, Is there an easy way to code hiding background images on mobile sites? With responsive design, the background image is getting moved over the text on the mobile screens on my sites. TYIA, ~eric
  21. Hi all, i have one problem… on the homepage i have 6 little boxes which i have achieved creating adding boxes and boxes#2 (i attach screenshot). The strange thing is that i have assigned the 6 boxes to the same set but only the first 3 were showing after dragging the "boxes" element in the template. So i had to clone it to create "boxes#2" and in that way the second row of three is showing up. Now, my problem is that for lower resolutions i would like the boxes to be displayed in a row to become 2 for @media screen and (max-width: 860px) …. do you have any suggestions? i am not sure if i can achieve this through css or what files i should modify. The problem is also when displayed in 2 in each row they should be 2 in the first row, 2 in the second and 2 in the third. For iphone resolution the framework already scale down to 1 in a row which works perfectly. Can you gel me on this? Thanks in advance
  22. Weird responsive behaviour

    Hello! My website works great on a normal sized screen, but on a small screen like a tablet or smart phone there is a weird scaling behaviour I can't fix. I deactivated all plugins and removed my custom code, but it's still there: If you're on my start page (http://kaiserbrand.com) and scale the explorer to a very narrow window, the space between my features and morefoot section increases in height! All other pages with a different setup are perfectly responsive. Any ideas how I can fix that? The exact structure of this page is header: -branding page template: -features morefoot: -highlight (line with shadow) -boxes -highlight (line with shadow) -universal sidebar Greetings from Berlin, Wolfgang
  23. extend navbar to full width

    I would like to extend the navigation bar to the full width of the screen like this site: http://www.recoveryoptions.us/ I would like to have a different color on the background behind the quickslider extended as well (just like on the example) Can someone please tell me how to do this? Thank you.
  24. Hello All, I'm having difficulty with my header/banner within my Pagelines Framework. My two main issues are: 1) The 3 images in the Header do not re-size when I re-size the FF/Safari/Chrome browser. The two images to the left and right of the logo were added using a hook within the functions.php file (see attached image) 2) The navigation menu also does not re-size http://nestacupuncture.com/acupuncture/our-treatments/nest-babies/ My Settings: Layout Handling: Responsive w/ Pixel Width Site Design Mode: Full Width Sections Header Sections: Branding, Classic Nav, Secondary Nav The following is my css code for the classic nav and the banner images. As you can see, I started with px declarations and tried to switch to em to fix the responsive issue. I basing the em sizes on a base font size of 14px. The below is placed within my child theme in the style.css file. #nav, #navbar { background-color:#C8BCAC; -moz-box-shadow: 0 0 3px #C8BCAC; -webkit-box-shadow: 0 0 3px #C8BCAC; box-shadow: 0 0 3px #C8BCAC; font-family:Arial, Helvetica, sans-serif; } #navbar .navbar-inner{ background-color:#C8BCAC; } .navigation_wrap, .main_nav_container{ background-color: #C8BCAC; /* height: 55px; */ height: 3.929em; } ul#menu-nav { margin: 0 0 0 10px; } #page .sf-menu li a, #page ul.sf-menu a:focus, #page .sf-menu a:hover, #page .sf-menu a:active, #page .main-nav a { background: none repeat scroll 0 0 #C8BCAC; font-family: Arial, Helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase; /* padding-top: 20px; */ padding-top: 1.429em; /* font-size: 95%; */ font-size: 1.0em; font-weight:500; margin: 0 1.286em 0 1.286em; /* margin: 0 18px 0 18px; */ } #page .sf-menu li a, #page ul.sf-menu a:focus, #page .sf-menu a:hover, #page .sf-menu a:active, #page .main-nav a { color: #FFFFFF; font-family:Arial, Helvetica, sans-serif; } li { /* line-height: 21px; */ line-height: 1.500em; } .site_tagline { /* width: 260px; */ float: left; } .section-branding .mainlogo-img { display: block; /* max-width: 142px; */ /* margin: 20px 70px 30px 180px; */ margin: 1.429em 5.000em 2.143em 12.857em; float:left; } .social_links { float:left; z-index:99; /* margin: 0 0 0 40px; */ margin: 0 0 0 2.857em; } I have the "Disable Mobile View" UNCHECKED. I tried checking it, and while it looked somewhat better on the iPhone, it did not fix the fact that the banner images & nav were not resizing. Can someone point me in the right direction? Any help is greatly appreciated! Thank you.
  25. Classic Menu Resposive?

    Hello, is it possible to have the classic menu resposive without visualizing on iphone the menu that goes on the line below. see my site with iphone. My setting is: Responsive with Pixel Width Full Widht Section |<1200>| Font-size: 1.3em Bold ___