Tagged: ismael
-
AuthorPosts
-
April 30, 2017 at 4:27 pm #785289
Hi
I’m launching tomorrow, so kind of fixings all sorts of display issues.
I noticed that the on my iPhone, the slider caption right does not displays as expected. See screenshot here:
https://www.dropbox.com/s/0d4wjjv28zwu43z/iphone%20slider%20caption%20right.PNG?dl=0The text looks centered instead of to the right of the image like on all other devices. I tried several different CSS some of which I found in the forum, but none of these worked.
Here’s the page where is most noticeable: http://crescendo.staging.wpengine.com/coaching/ (hosted on WPengine)
Any help to force this to display correctly would be greatly appreciated.
Thanks
LyseApril 30, 2017 at 5:07 pm #785300Hey Lyse,
I see what you mean that is appears it’s centered.
In the design of the theme, the width of the div
caption-container
is 85% of the available screen width, to make sure that there is a nice space from edge of the screen. Inside that div, the text is currently set to align to the right. But when the length of the caption is equal to the total width ofcaption-container
, it looks like the caption aligned to the center. This is what happened in /coaching, like you said. But it’s really aligned to the right.To test this rule, I tried putting a line break in the middle of your caption, and we can see that the text aligned to the right. Like this:
http://imgur.com/a/vTQCDSo the code of the theme is working properly. :)
If you want, you can adjust the width of the div, just for phones, like this:
@media only screen and (max-width: 767px) { .avia-slideshow-1 .caption_container { width:95% !important; max-width:95% !important; } }
I hope my explanation is clear. Please let me know if anything is unclear!
Best regards,
Sarah- This reply was modified 7 years, 7 months ago by Sarah. Reason: css code modified to apply to slideshow 1 caption container only
April 30, 2017 at 6:26 pm #785345Hi Sarah,
Great explanation!
I added the CSS but it still not working properly.
Thanks
LyseApril 30, 2017 at 7:34 pm #785372Hi Sarah,
It’s also happening on my sliders on this page: http://crescendo.staging.wpengine.com/ (hosted on WPengine)
Thanks
LyseApril 30, 2017 at 8:15 pm #785386Hi again Sarah,
My client’s iPhone is smaller than mine (G5) and here’s what it looks like:
https://www.dropbox.com/s/nvmignqq01wys48/Julie%20iPhone%20caption%20issue.PNG?dl=0One more issue also is if you size your desktop window the caption display responsiveness is not correct either.
Thanks
LyseMay 1, 2017 at 1:46 pm #785714Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 480px) { .slideshow_align_caption { padding-top: 15px; }}
Best regards,
YigitMay 1, 2017 at 3:25 pm #785788Hi Yigit,
I tried the code snippet but don’t see the change.
Thanks
LyseMay 1, 2017 at 3:27 pm #785792Hi,
They show up fine on my end, attached a screenshot in private content field.
Please flush browser cache and refresh your page a few times – http://wiki.scratch.mit.edu/wiki/Hard_Refresh
Best regards,
YigitMay 1, 2017 at 3:52 pm #785807Hi Yigit,
I tried again and also removed the previous code snippet that was provided earlier.
I did clear server cache and also tried the code on my staging area (where there is no server cache) and the caption still does not wrap like on the desktop or iPad. There should not be any text across faces or body of the people on the image and should be in a restricted block form like the others. The text is small enough to fit within a block.
My site is just on hold temporarily on production and if you wish you can see it here:
Thanks
LyseMay 2, 2017 at 5:06 pm #786547Hi,
you could use this code for mobile (iPhone screen size):
@media only screen and (max-width: 767px) { .slideshow_align_caption { top: 117px; }}
and adjust as needed.
Best regards,
AndyMay 2, 2017 at 5:40 pm #786571Hi Any,
What I want is for the text not overlap the person in the images like on the desktop and ipad. So I’m not sure it’s the top of the element that needs repositioning. The text should be restricted in width and wrap to the next line.
Thanks
LyseMay 2, 2017 at 5:53 pm #786586Hi,
by using my code you should go fine. However, best to provide us a mockup showing the results you want to achieve, cause then we can provide you a much more precise code to achieve what you want.
Best regards,
AndyMay 2, 2017 at 6:03 pm #786596Hi Andy,
Here’s what it should look like: https://www.dropbox.com/s/w0rxt8ffnfuqccg/iphone%20slider%20caption%20alignment.PNG?dl=0
Thanks
LyseMay 2, 2017 at 6:30 pm #786614Hi,
use this code:
@media only screen and (max-width: 767px) { .avia-caption-content.av_inherit_color { width: 100px; float: right; margin-right: 18px; margin-top: 36px; }}
and adjust as needed.
Best regards,
AndyMay 2, 2017 at 6:56 pm #786634Hi Andy,
I added !imortant to all elements because nothing was changing. Once reuploaded, I saw the margin top change but the content still displays across the image…
Thanks
LyseMay 2, 2017 at 9:46 pm #786738Hi,
May you clear your cache and check if this will solve?
Best regards,
John TorvikMay 3, 2017 at 12:54 am #786808Hi John
I can see it’s working fine on two of the pages, but on the home page where I use a left caption, it’s messed up.
Thanks
LyseMay 3, 2017 at 1:17 am #786815Hi John,
Another thing I did was to add the “.caption_right” element to the last CSS code so it would only get applied to the right caption content.
@media only screen and (max-width: 767px) {
.caption_right .avia-caption-content.av_inherit_color {
width: 100px!important;
float: right!important;
margin-right: 18px!important;
margin-top: 36px!important;
}
}Lyse
May 3, 2017 at 5:52 am #786888Hi John,
Here’s a screenshot of how my client sees the home page sliders:
on iphone 5 : https://www.dropbox.com/s/ii7myi2sbtyzzm0/slider%20caption%20client%20iphone%205.PNG?dl=0
on iphone5S : https://www.dropbox.com/s/q295vlyt0441idp/slider%20caption%20client%20iphone%205S.PNG?dl=0I also have similar issues on my iphone 6S
Thanks
LyseMay 3, 2017 at 6:14 pm #787277Hi,
Please post us your login credentials (in the “private data” field), so we can take a look at your backend.
Login credentials include:
- The URL to the login screen.
- A valid username (with full administration capabilities).
- As well as a password for that username.
- permission to deactivate plugins if necessary.
Best regards,
AndyMay 3, 2017 at 6:45 pm #787299Hi Andy,
See below….
May 3, 2017 at 7:19 pm #787325Hi,
this is a login to a different site. Please provide login for the website in private content instead.
Best regards,
AndyMay 3, 2017 at 8:08 pm #787353Hi Andy,
My website is on the product side now just waiting for issues to be resolved with the sliders captions, then I’ll release it.
All of the latest CSS changes are on the production side at the URL I provided you with. I have resetted the password, login with it successfully, so please try again.
Thank you for your patience
LyseMay 3, 2017 at 8:17 pm #787361Hi,
ok, but where can we see the elements in question? This is the only thing I can see on your homepage: “Hors service temporairement durant la mise à jour du site web”
Best regards,
AndyMay 3, 2017 at 8:45 pm #787383May 6, 2017 at 12:31 pm #788800Hi,
The caption that you’re referring to is part of the image. Please note that the slider images are set as background and their background size property is set to “cover” which means that it will force the image to cover the entire container but some parts of the images might not be visible inside the background positioning area. You should remove the “SUPRENEZ VOUS” text in the image or add another slider that is specifically created for mobile screens.
Best regards,
IsmaelMay 6, 2017 at 6:38 pm #788881Hi Ismael,
The caption on the left is not part of the image. Andy provided the CSS code to make the caption display better on the right. I’m looking to do the same with the left.
Thanks
LyseMay 8, 2017 at 5:51 am #789322Hi,
To have sure, may you provide us a screenshot about this caption that you want the last change?
Best regards,
John TorvikMay 8, 2017 at 3:22 pm #789654Hi John,
I provided iphone screenshots but here are three more:
RELEVE page landscape: https://www.dropbox.com/s/dmlx76pgzuju60s/IMG_0469.PNG?dl=0
HOME page vertical: https://www.dropbox.com/s/7sb68v3s79nt8fu/IMG_0472.PNG?dl=0
HOME page horizontal: https://www.dropbox.com/s/u98bz8raky3u8jx/IMG_0473.PNG?dl=0
I must get this working soon….
Thanks
LyseMay 9, 2017 at 7:13 am #790018Hi,
Please look for this css code in the child theme’s style.css file.
@media only screen and (max-width: 480px) { .slideshow_align_caption { vertical-align: top; padding-top: 50px!important; } }
Adjust the viewport from 480px to 768px. It will move the captions to the top of the slider.
Best regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.