Jump to content

Archived

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

mnagillum

Responsive design? Not working

Recommended Posts

mnagillum

The site I'm working on--ndtest.mamulligan.com--is working at all on mobile devices. The home page image is not resizing at all. Is there a way to eliminate that image just for mobile? Another site I work--leedems.org--on uses some identical components, but it works just fine on mobile. What can I do to get this site to work on mobile? Thanks in advance.

Share this post


Link to post
Share on other sites
Danny

Hi,

Both sites are using two different sections to add those header images. However, not sure why you're using the RevSlider to showcase an image, when the section should be used to show slides. If you want to show a header image, why not just add the image to a Canvas area?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
mnagillum

Thanks, Danny. On earlier attempts, I was unable to get a static header image to appear as I wanted it even on the desktop version, but I've got that working now so this is no longer a slider. (The slider image on the other site resizes for mobile, while this one doesn't resize no matter what I do.) For a few minutes, it seemed to be working responsively, but then it reverted back to NOT working (I updated to the most recent version of PageLines. Could that be the problem?). So it still looks dreadful on a cellphone--and that's after I get rid of the weird WP contact form that pops up first. And the icons near the bottom don't work, either. I used a carousel to display those so they could work as hyperlinks. 

Any other ideas? This has been tremendously frustrating.

 

 

Share this post


Link to post
Share on other sites
Danny

If you want to add an image, I would use either a Canvas section if you want it full width or a MediaBox section. If you want to control the size of the image.

What icons are you referring to, can you provide a screenshot and link to the site in question.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
mnagillum

The site is ndtest.mamulligan.comI have used the Canvas section for the large image at the top. The icon carousel is at the bottom of the home page, labeled "Services." I tried setting these up as mediaboxes, but there was no convenient way to make them hyperlinks to individual pages on the site, so I tried Quick Carousel.

Thanks for your help.

Share this post


Link to post
Share on other sites
Danny

Right your background image is rather large. Now the Canvas section like most responsive layouts for large images will use background-size: cover;.

Cover does the following "Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area" which means that some of your image will be missing.

Now we use contain instead of cover or 100%, then your image will resize, but will be incredible small due to the ratio between your width and height. For example - https://cloudup.com/c01p_UrCRzu

Therefore, you have a decision to make, do you decrease the width of your image or use either contain or 100% on background-size and then use more custom CSS to reduce the gap created on mobile devices?

In regards to the Carousel, how you have set up the section as the images shouldn't be cut off like that? In my opinion the best option would be to use MediaBox sections instead. To add an image with a link to a MediaBox, you will need to use HTML instead of uploading the image via the upload image option.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
mnagillum

Thanks, Danny. I was able to get the icons to work using HTML as you suggested. This was easy to accomplish in the end. It would be helpful if PageLines would provide simple, easy-to-follow instructions where they are needed, so people who aren't immersed in HTML/CSS would be able to figure these things out. An option to make a mediabox into a hyperlink would be phenomenal.

I've simplified the splash image and experimented with "contain" of "100%" for the background size. "Contain" didn't work. The "100%" option worked better, but when I minimize the size of my desktop screen or look at the site on a mobile device, the image repeats. Again, the site is ndtest.mamulligan.com. Area minimum height (px) is set to 348; if I leave this blank, the entire canvas area disappears. 

Any other ideas? Much appreciated.

Thanks again.

 

 

Share this post


Link to post
Share on other sites
Danny

Can you provide a link to the page in question, as I am not seeing any background image on the site you linked above.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
mnagillum

It disappears if I try various settings. It's there now. ndtest.mamulligan.com

Frankly, it would be fine if I could get that image to not appear on mobile devices.

Share this post


Link to post
Share on other sites
Danny

Okay, I think I see your issue. You're using a Canvas section and have set a background and given it a min-height. However, you have no other content in that section and, therefore, if you remove the min-height nothing will display. Therefore, what I recommend you do is one of the following:

1. Add a section like a Masthead to the Canvas section that has that background image. Add some text like a slogan for your site.

2. Add your image via HTML to the full-width Nextbox section and see if that works.

3. You can hide any section on mobile devices, but you need to enable the option via the DMS Pro Tools plugin settings.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • 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?

    • 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.
    • poseyg
      By poseyg+
      This just happened to a site I'm working on. When I decrease width of browser to check for responsiveness...the pagelines content section is not responding???
    • yemoonyah
      By yemoonyah+
      While building my website, I set a padding of 5%, 25%, 5%, 25% so the text on the pages is not too wide.
      However, it looks crappy on mobile.
      How do I get the same effect and still have it look good on mobile?
      Example: http://yemoonyah.com/quiz
      Thanks
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      can I limit the overall of MegaNav on mobile? When I look at michaelkummer.com on a mobile device, the menu takes up more than a third of the screen space. Using CSS to limit max-height doesn't seem to work. Is there another/better way to reduce the overall height to maybe 10% of the screen available?
      Thanks
      Michael
       
×