-
Posts
-
Hi
My homepage has a fullscreen slider, and I have two buttons that look OK on the desktop, but on mobile (for example iPhone 5S sized screen) the buttons aren’t aligned nicely.
Is there a solution that will align Button 1 and Button 2 centrally on mobile?
I did search the forums for a suction first, but couldn’t find one :-)
It would also be nice if I can adjust the padding to the left of Button 1 on desktop to align it with the caption text (for example, align the border with the start of the caption).
My site is here:
Thanks…
Hi John!
Thanks for reaching out to us here on the support forum.
To align the buttons on the slider properly on mobile devices, please add the following CSS in the Quick CSS field in the theme options:
@media (max-device-width: 500px) { .avia-multi-slideshow-button.avia-slideshow-button-2 { margin-left: 0px; } }This will remove the margin that is to the left of button 2 on mobile devices.
Cheers!
JordanHello Jordan,
Will this issue be adressed in future updates of Enfold? It’s an issue even in your own demos! In my opinion it should be fixed and not require a workaround.
Best regards and thanks for a great theme!
Simon BergHi,
about which demo are you talking about? can you provide us a precise link please?
Best regards,
AndyHi Andy,
Thanks for a swift reply! Here are some examples of button not aligning when they are stacked vertically (for example when in portrait mode on smartphone (unless it’s a super-size phone in which case the buttons will appear side by side even in portrait mode) or minimum browser width with Firefox on PC etc).
http://kriesi.at/themes/enfold-one-page-portfolio/
http://kriesi.at/themes/enfold-shop/
http://kriesi.at/themes/enfold-photography/
http://kriesi.at/themes/enfold-restaurant-one-page/
http://kriesi.at/themes/enfold-travel/ (in this one the second button even disappears!)
http://kriesi.at/themes/enfold-church/ (and here the buttons disappear altogether!)In the private content you will find a link to what the issue looks like on our own site.
I have to admit that I am surprised that this issue has gone unnoticed since it is present on the landing page of 6 of your own demos! It looks really cheap and it’s the first thing you see when browsing from a mobile (which in our case is roughly 65% of all traffic)!
I would be really happy if this issue could be fixed quickly AND your own demos will look much nicer as well!
Best regards
Simon BergHi,
I can’t see any issues on http://kriesi.at/themes/enfold-one-page-portfolio/ (mobile device). It looks like this for us:
Can you highlight what you mean using screenshots please?
Best regards,
AndyHi Andy,
the issue is present in portrait mode on basically all mobile phones apart from really hi res iPhones and phablets.and on our own site…
PS/ Sorry about all the modifications to the post! I’ve never used Imgur before and had some trouble embedding the images. Let me know if the links don’t work. /DS
Hi,
Thank you for the screenshots. Helps a lot! Use this css code:
@media only screen and (min-width: 768px) { .avia-multi-slideshow-button.avia-slideshow-button-2 { margin-left: 0; } }Best regards,
IsmaelHello,
Thank you for your reply and beg your pardon for this stupid question. I’ve nerver edited css before so where do I enter the code?
Best regards
SimonHey guys!
None of the solutions you’ve provided has worked for me yet. Any other suggestions pls? On the left, there’s still a considerable difference in alignment.
Thank you!
hacart
Hi,
you can move your buttons with this code:
@media only screen and (max-width: 767px) { #top .avia-slideshow-button { left: 10px; }}Best regards,
AndyHi Andy,
Not the expected result. I just need the left bottons (on mobile) to be perfectly aligned with the title as on the right side. So we’ll need to only move the fisrt bottons outwards to match with tiitle and second bottom. What you gave me moved all of the bottons to the left.
Regards,
hacart
Hi,
not sure what you want to achieve. Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)
Best regards,
AndyHey Andy,
Sorry about the right-left confusion ;)
The right side bottons are what I meant. I placed this code but didn’r work:
@media only screen and (min-width: 768px) {
.avia-multi-slideshow-button.avia-slideshow-button-2 {
margin-right: 0;
}
}Also, when on this page “consulta gratis” (secondary menu). First bottonis off centre.
Best regards,
hacart
Hi,
for your second button use this code:
@media only screen and (min-width: 1024px) { a.avia-slideshow-button.avia-button.avia-color-theme-color.avia-multi-slideshow-button.avia-slideshow-button-2 { left: -19px; }}and adjust media queries as well as left value as needed.
Best regards,
AndyHi,
At this point, when I’ve tried everything written and suggested on this forum -whithout succeeding, I think it is necessary for any of you to kindly intervene.
Thanks!
Hello again,
I’ve posted to this thread a number of times before. I have also tried all suggested solutions, but none of them works!
By now it should be perfectly clear that a responsive theme such as Enfold should be able to display two buttons that align when displayed on a small screen!
Furthermore, this should not require any CSS-code or other workarounds. It should be an integral part of the theme itself.
Why? Well because not one single user of the Enfold theme would want the buttons not to align. Most websites these days have buttons on their landing page. And having un-aligned buttons on your landing page gives a very poor first impression.
Of all bug fixes of the entire Enfold theme this would be the most obvious one to fix. Especially since the unaligned buttons are present in like 90% of YOUR OWN DEMOS! (As I’ve displayed previously on this particular thread.)
Please, please, please adress this issue in the next theme update.
Best regards
SimonHi Simon,
it’s not a theme issue at all, as this happens to pretty much every theme out there. It works totally fine on all mobile devices as you can see here:
iPad:
http://smrtshot.com/i/LysBiPhone:
Responsive means that it looks good on mobile devices. If you want something beyond that, then you need to adjust it via custom css code.
Best regards,
Andy@hacart
Try this code:@media only screen and (max-width: 767px) { a.avia-slideshow-button.avia-button.avia-color-light.avia-multi-slideshow-button.avia-slideshow-button-2 { left: -10px; }}and adjust as needed.
Best regards,
AndyHi,
your buttons look good to me: http://i.imgur.com/afYFaJR.png
Could you fix it?
If not would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)Best regards,
AndyHey,
I provided screenshots on post #691034 and even access data for you to pls help me out cos’ as I’ve been insisting, I was not able to achieve the alignment of right side bottons on the mobile version.
Regards,
hacart
Hey!
@hacart i added following code to quick CSS and flushed cache.@media only screen and (max-width: 480px) { #top .avia-multi-slideshow-button { width: 46%; float: left; margin-left: 1%; }}Please review your website now
Best regards,
YigitHey Yigit,
I appreciate your diligence but I was just expecting them to bo aligned as they normally are meant to be, not all of them on the left cos’ now it looks far messier (the titles on the right seem not to belong to their CTAs. So I was hoping to get the first botons to be moved to match the alignment with the title and second boton, just as they as meant to be.
Even the size of bottons changed, which is not appealing at all.
Regards,
hacart
- You must be logged in to reply to this topic.