Jump to content

Archived

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

paoloimperiale

Mobile View Looks Horrible

Recommended Posts

paoloimperiale

Hello,

So the desktop version of PageLines sections looks fantastic! Now for the mobile view.. errr.. ok, don't know what 's going on with that. I have jetpack, tried a couple of "mobile view" plugins. It's a no go. The PageLines sections ONLY are all out of proportion. The title area HUGE on home page, slider- barely visible- almost disappeared, and section below that with two images that should be side by side are now staggered - not even aligned one on top of the other. The letters in this section- also enormous.. 

Every page title HUGE.

Share buttons on blog page- ALL OVAL with no icon inside- just an "X" in its place

Additionally, you guys sent me some code to remove all of that, suddenly they're showing up again also on the desktop version- also with "x's" in the colored circles.  

Any advice on how to fix all of this?

www.paoloimperiale.com

Thank you.

Share this post


Link to post
Share on other sites
Simon

The page title with the dark background? Thats added by your theme.

PL5 does not have sharing buttons like that, you have added those with a plugin of some sort.

Bit difficult to see whats causing the font issue as you have all sorts of caching going on.

Why are you caching database queries to disk?

Share this post


Link to post
Share on other sites
paoloimperiale

Hi,

Yes, you correct, the dark background page titles are the site theme, but on the home page, that was added with PageLines. 

I know that PL5 doesn't have sharing buttons, but a few weeks ago, you guys provided me with some custom CSS code to remove sharing information from the bottom of the blog post like that- it seem to pop up automatically because I have all sharing disabled within the site, it's picking it up from I don't know where.. 

What do you mean by "caching database queries to disk" I just simply used the PageLine tools as shown in your tutorial... I'm not really sure what I did, could please indicate to me what I may have done to get that result? Obviously I'm not a developer, so a simple explanation would be very helpful. Thank you. 

Share this post


Link to post
Share on other sites
Simon

The sharing buttons are added by a plugin, if you dont want the buttons turn off the plugin or hide them with css.

No PageLines tutorial would include adding a caching plugin. 

My advice, turn it off while you are designing the site, better still remove it altogether. They are a false economy.

Share this post


Link to post
Share on other sites
paoloimperiale

OK, I found the plugin.. completely deleted it.. Have no idea where that came from.
Is there a code to hide the sharing buttons in the plugin? I'm not seeing a plugin for social + the they're all turned of in the theme customizer.. Thank you in advance for your help!

Share this post


Link to post
Share on other sites
Simon

I think the sharing is added by jetpack

Share this post


Link to post
Share on other sites
paoloimperiale

Ok, that worked! 

Now for this issue:

The PageLines sections are out of proportion on the home page. The title area is HUGE, the slider- barely visible- almost disappeared, and section below that with two images that should be side by side are now staggered - not even aligned one on top of the other. The letters in this section- also enormous..

Any suggestions on how to fix these issues? Thank you! 

Share this post


Link to post
Share on other sites
paoloimperiale

Ok, that worked! 

Now for this issue:

The PageLines sections are out of proportion on the home page. The title area is HUGE, the slider- barely visible- almost disappeared, and section below that with two images that should be side by side are now staggered - not even aligned one on top of the other. The letters in this section- also enormous..

Any suggestions on how to fix these issues? Thank you! 

Share this post


Link to post
Share on other sites
Aires

Hi,

With the flick slider you need to adjust the (vw) in the options to see a difference on mobile.

As for the images that is completely on you. You have a image that is 370x54 but  75% of it is transparent and the other 25% has a small image and the same for the image on the right. 

So what happens when you size it down is both image sections go full width and stack on top of each other and it looks staggered. You need to find a better solution.

 

Screenshot 2016-05-01 14.58.53.png


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
paoloimperiale

Hi thank you for your reply.

Please excuse my ignorance, but is there a way to separate that from the desktop version? The reason it's set to the height that it is, is because that's what makes sense for desktop. The reason that the image sizes are set the way they are (below that- the two certification badges), is because it was the only way to manipulate the images into sitting side by side -again on desktop. Those two images need to be centered and individually clickable, otherwise, I would have made a single image and set it in there.. If there is another way to make those two certification badges sit side by side and individually clickable, please let me know. Also, I'm still not understanding why the section below that looks so big on mobile (at least in proportion to the certification badges and the slider)? Your response is much appreciated. Thank you. 

Share this post


Link to post
Share on other sites
paoloimperiale

Hi thank you for your reply.

Please excuse my ignorance, but is there a way to separate that from the desktop version? The reason it's set to the height that it is, is because that's what makes sense for desktop. The reason that the image sizes are set the way they are (below that- the two certification badges), is because it was the only way to manipulate the images into sitting side by side -again on desktop. Those two images need to be centered and individually clickable, otherwise, I would have made a single image and set it in there.. If there is another way to make those two certification badges sit side by side and individually clickable, please let me know. Also, I'm still not understanding why the section below that looks so big on mobile (at least in proportion to the certification badges and the slider)? Your response is much appreciated. Thank you. 

 

Share this post


Link to post
Share on other sites
paoloimperiale

Hi thank you for your reply.

Please excuse my ignorance, but is there a way to separate that from the desktop version? The reason it's set to the height that it is, is because that's what makes sense for desktop. The reason that the image sizes are set the way they are (below that- the two certification badges), is because it was the only way to manipulate the images into sitting side by side -again on desktop. Those two images need to be centered and individually clickable, otherwise, I would have made a single image and set it in there.. If there is another way to make those two certification badges sit side by side and individually clickable, please let me know. Also, I'm still not understanding why the section below that looks so big on mobile (at least in proportion to the certification badges and the slider)? Your response is much appreciated. Thank you. 

 

Share this post


Link to post
Share on other sites
paoloimperiale

Hello,
We were on a different thread, but I've posted my same question 3 times over the past 3 days and I still haven't received a reply- maybe it's going unnoticed? So I'll try and post it here:

Your support's reply with my comments in bold:

Hi,
With the flick slider you need to adjust the (vw) in the options to see a difference on mobile. Please excuse my ignorance, but is there a way to separate that from the desktop version? The reason it's set to the height that it is, is because that's what makes sense for desktop.
As for the images that is completely on you. You have a image that is 370x54 but  75% of it is transparent and the other 25% has a small image and the same for the image on the right.  Those two images need to be centered and individually clickable, otherwise, I would have made a single image and set it in there.. If there is another way to make those two certification badges sit side by side and individually clickable, please let me know. As of now, again, looks great on desktop, terrible in mobile.
So what happens when you size it down is both image sections go full width and stack on top of each other and it looks staggered. You need to find a better solution.

Still a question that has yet to be addressed (I asked it at the beginning of the thread, but for some reason it keeps getting ignored)

Also, I'm still not understanding why the section below the slider looks so big on mobile (at least in proportion to the certification badges and the slider)? Your response is much appreciated. Thank you. 

www.paoloimperiale.com

mobile-view.png

Share this post


Link to post
Share on other sites
Simon

Im afraid we work a queue system with support, or should I say I work a queue system, you now have four topics with the same question then plus at least one support ticket .. please be patient.

Share this post


Link to post
Share on other sites
paoloimperiale

OK, thank you. good to know.. I await your reply then.

Share this post


Link to post
Share on other sites
Simon

Merged all your topics into one.. for sanity.

Aires already pointed out in this reply: 

 

You have transparency in the images, they are never going to line up.

Remove the transparency so the images are both same size. If you then center allign both the images they should stack on top of each other.

Share this post


Link to post
Share on other sites
paoloimperiale

Hi Simon,

Ok, I'll try working on getting the images to center without the transparency and see if I can get it to look right. But I'm really not understanding what you guys mean about the flicker slider.  I adjusted the slider height so it looks good on desktop, but I'm not understanding how to change it for mobile - if I change the height, it's also going to reflect that change on the desktop version- which what I don't want. 

Thank you.

 

Share this post


Link to post
Share on other sites
Simon

The slider is responsive, if you want it to stay the same size on mobile you will need to use some css.

Do you want it to stay desktop size on mobile?

Share this post


Link to post
Share on other sites
paoloimperiale

That would be great! If you look at the mobile view, the section below the slider is big while the slider is really tiny.. if there is a way to fix that, I'll take it! Thank you!! 

Share this post


Link to post
Share on other sites
paoloimperiale

Hi, I was wondering if you'd be able to provide me with some code as you suggest? 

Share this post


Link to post
Share on other sites

  • Similar Content

    • ideascurator
      By ideascurator+
      Hello Pagelines,   I no longer use pagelines services. I have deactivated the automatic annual payment. But it already charged to my credit card. Since I cancelled my contract before the end, Can I request to refund?
    • Anthony King
      By Anthony King+
      Hello,
      I am wanting to know what the status of the Pagelines Platform.
      I have noticed that there has been absolutely no updates on Platform 5 for over 8 months.
      Please tell me you haven't gone off on another tangent and going to build the next great solution
      and then leave all of us to have to completely rebuild our sites like we did for
      Pagelines, then DMS, then Pagelines Platform.
      I like what you build, but what you need to do is build one product and then make it better, rather than 
      abandoning it and building something else.
      You haven't done anything for so long that even WordPress is providing a warning.
      "Warning: This plugin has not been tested with your current version of WordPress."
      So what is the Status. I mean if I am going to pay a monthly fee for a product, I don't want to pay for one
      that is no longer being supported. You have a great product, I'm not bashing it, I'm just wondering what 
      your next move is because I have business decisions to make for myself, and whether of not this is something
      I should stick with.

      Please be kind enough to respond.

      Thank You,
      Anthony
    • tuciudadenred
      By tuciudadenred+
      Hi everyone, what happens is that the web page metrosalarmas.com has a google tags which I have not attacked where I can look to remove those tags and be able to locate the correct ones.
    • oseehys
      By oseehys+
      Hello There,
      So i want to use platform 5 and DMS sections on a single page, i am using a child theme with pinspro as my main theme and i activated platform 5, the only problem am having so far is the fixed option, my navbars are not aligning to their default size, and it will be great if platform 5 header and footer section will function, has anyone used this option, how can i make the best use of platform 5 and DMS on a site
      Cheers
    • thirdstonemedia
      By thirdstonemedia+
      I've been fighting with a resolution issue ? Want to use Flick Slider, the site looks great on my monitor but client says she can't see bottom of homes. I believe she's on an old PC using outdated browser/s ... but, she's important to me and I'd like to make this work, on her system. Without asking her adjust her own set-up. 
      I put the Flick Slider inside a container, here ::
      http://becauze.xyz/home-five
      Set the Height of Flick Slider to 50 Base ... I don't know how this works exactly ... there is a Base then a Min ... but, haven't adjusted the Min ::
      http://becauze.xyz/home-four/
      Tried using Splash Up, which presents the same issue (she can only see top of home) and she wants several images to rotate on Home page, so not sure this would work anyway ::
      http://becauze.xyz/
      I have tried going into Layout and making the width narrower, and that does make the site narrower, but the homes still don't display in full, on her system. Help ?

      Here are her screen grabs, both desktop and iPad  (dumped the chalkboard background).

      FInally, she said these look great ::
      http://www.sinclairaia.com/
      http://www.kristihanson.com/
      What am I doing wrong ?? Is there a better way to accomplish making the site look great on any resolution at any size ?
      Joanne
      (Longtime Pagelines-lover.)


×