Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • May 30, 2019 at 12:47 am #1105307
    eggc

    Hello,

    I’m trying to make the captions for my Accordion Slider title to be vertical and center aligned so they show when they are side by side. I kinda have it working but a few of the titles are cut off and not showing. You can see the issue in the private contact link. The title all the way to the right “entertainment” does not show at al…”Automative” and “eduction” get cut off.

    June 1, 2019 at 7:00 am #1105976
    Rikard

    Hey eggc,

    I think you will have to add different CSS depending on the screen size using media queries. There probably isn’t any universal CSS for all screen sizes unfortunately.

    Best regards,
    Rikard

    June 3, 2019 at 7:35 pm #1106804
    eggc

    ok, Can you help with this?

    June 4, 2019 at 5:42 am #1106928
    Rikard

    Hi,

    What exactly do you need help with? If you don’t know how to use media queries then you can find out how to do it here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    Best regards,
    Rikard

    June 4, 2019 at 7:49 pm #1107244
    eggc

    I managed to get the captions to work fine on desktop by adding

    #top .aviaccordion-title {
font-size: 30px;
}

#top .aviaccordion-title {
-webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); transform:rotate(-90deg); 
}

    For mobile I tried adding this but it doesn’t do anything. It seems that the captions are no longer flipped and are out of frame.

    @media only screen and (max-width: 480px) {
   #top .aviaccordion-title {
    font-size: 16px !important;
   }

@media only screen and (max-width: 480px) {
#top .aviaccordion-title {
-webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); transform:rotate(-90deg); 
}
  }
    • This reply was modified 5 years, 8 months ago by eggc.
    June 5, 2019 at 6:23 am #1107366
    Rikard

    Hi,

    You haven’t closed the first media query:

    @media only screen and (max-width: 480px) {
   #top .aviaccordion-title {
    font-size: 16px !important;
   }

    It’s missing a curly bracket at the end which might be the reason for it not applying. Also note that 480 pixels will only apply to the smaller end of mobile devices. You could try changing it to 767 for instance.

    Best regards,
    Rikard

    June 5, 2019 at 7:14 pm #1107723
    eggc

    Rikard,

    Thanks for the recommendation. Upon adding the adjusted code you recommended it changes but the text is still not visible on tablet or mobile. 

    @media only screen and (max-width: 767px) {
   #top .aviaccordion-title {
    font-size: 16px !important;
   }
  }

@media only screen and (max-width: 767px) {
#top .aviaccordion-title {
-webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); transform:rotate(-90deg); 
}
  }
    June 6, 2019 at 6:13 am #1107818
    Rikard

    Hi,

    This CSS is causing the headers not to show:

    @media only screen and (max-width: 687px) {
#top .aviaccordion-preview-title-wrap {
    display: flex;
    padding-top: 355px;
}
}

    Best regards,
    Rikard

    June 6, 2019 at 7:14 pm #1108058
    eggc

    Thanks @Rikard, removing that seems to help. Is there a way to move the entrainment text left a smidgeon? It seems to get cut off.

    June 7, 2019 at 9:45 am #1108201
    Rikard

    Hi,

    You can try to target that element using this CSS:

    .aviaccordion-slide-6 .aviaccordion-title {
    left: 70%;
}

    Best regards,
    Rikard

    June 10, 2019 at 7:37 pm #1108868
    eggc

    Thanks @rikard, I tried that but it title does not seem to adjust. I tried using the important as well without any luck.

    June 10, 2019 at 11:43 pm #1108910
    Jordan Shannon

    Hi,

    Did you add the code to the very top of quick css so it runs first? Also, clear the cache a few times over.

    Best regards,
    Jordan Shannon

    June 11, 2019 at 7:43 pm #1109258
    eggc

    Hello @jordan Yes, I did.

    June 13, 2019 at 6:05 pm #1109960
    Victoria

    Hi eggc,

    Best regards,
    Victoria

    June 13, 2019 at 10:17 pm #1110131
    eggc

    Hi @Victoria, I cleared my cache and this is what I see on my mobile.

    June 14, 2019 at 6:24 pm #1110409
    Victoria

    Hi eggc,

    And is this not the look that you were trying to achieve?

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    June 14, 2019 at 8:01 pm #1110458
    eggc

    The “Entrainment” text is too far to the left and is not centered like the other titles. I’m trying to make the text centered like the other titles.

    June 15, 2019 at 3:14 pm #1110673
    Victoria

    Hi eggc,

    Thank you for clarifying.

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 479px) {
  .aviaccordion-slide-6 .aviaccordion-title {
    margin-left: -20px;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    June 17, 2019 at 7:34 pm #1111126
    eggc

    That code worked amazing. Thank you @victoria

    June 17, 2019 at 10:08 pm #1111149
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘Accordion Slider Title Captions’ is closed to new replies.