Mobile View Looks Horrible

[paoloimperiale+ 1]

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.

[Simon 248]

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?

[paoloimperiale+ 1]

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. 

[Simon 248]

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.

[paoloimperiale+ 1]

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!

[Simon 248]

I think the sharing is added by jetpack

[paoloimperiale+ 1]

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! 

[paoloimperiale+ 1]

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! 

[Aires 265]

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.

 

[paoloimperiale+ 1]

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. 

[paoloimperiale+ 1]

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. 

 

[paoloimperiale+ 1]

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. 

 

[paoloimperiale+ 1]

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

[Simon 248]

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.

[paoloimperiale+ 1]

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

[Simon 248]

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.

[paoloimperiale+ 1]

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.

 

[Simon 248]

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?

[paoloimperiale+ 1]

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!! 

[paoloimperiale+ 1]

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