Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 28, 2018 at 10:47 pm #919305
    ginnywills

    Hi
    I am using the full screen slider on my home page and its great except I am having trouble with the captions. The 1st heading is great, but the subheading is really small and does not respond to the font size I choose within the layout builder. So, I added some CSS to make it 25px and I am happy.

    Except when I look at it on the phone, now the subheading is actually bigger than the heading. I really want the heading to be a little bigger and the subheading to be smaller. Can you give me the CSS to do this just for the phone?

    http://www.roadies.coach

    Thanks!

    March 1, 2018 at 8:29 am #919454
    Rikard

    Hey ginnywills,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.home .avia-caption-content p {
  font-size:16px !important;
}
}

    Best regards,
    Rikard

    March 1, 2018 at 4:15 pm #919719
    ginnywills

    That worked. Thanks!

    Now, how do I make the main heading slightly bigger on the phone? I tried the following but it doesn’t do anything:

    @media only screen and (max-width: 767px) {
    .avia-caption-title {
    font-size:26px !important;
    }
    }

    March 1, 2018 at 9:49 pm #919952
    Basilis

    Hi,

    That should work.
    I have loaded your web site and I can not see the code there – have you removed it?

    Best regards,
    Basilis

    March 1, 2018 at 9:57 pm #919971
    ginnywills

    I added the CSS code earlier but didn’t really see any effect. My biggest issue is I want the headline bigger – but your code is for “p” which confuses me?

    March 2, 2018 at 7:23 am #920117
    Rikard

    Hi,

    Please try this instead:

    @media only screen and (max-width: 767px) {
  .slideshow_align_caption h2.avia-caption-title {
    font-size:26px !important;
  }
}

    Best regards,
    Rikard

    March 2, 2018 at 5:39 pm #920451
    ginnywills

    Hey – sorry that still did not work.

    Any other ideas?

    March 3, 2018 at 7:51 am #920660
    Rikard

    Hi,

    Please try this instead:

    @media only screen and (max-width: 767px) and (min-width: 480px) {
.responsive #top .slideshow_caption h2 {
    font-size: 26px !important;
}
}

    Best regards,
    Rikard

    March 6, 2018 at 1:12 am #921968
    ginnywills

    Hey – sorry but that is not working either. Got anything else?

    March 6, 2018 at 7:25 am #922083
    Rikard

    Hi,

    It looks like you have this in Quick CSS which is the CSS applying to that element:

    @media only screen and (max-width: 767px) and (min-width: 480px) {
.responsive #top .slideshow_caption h2 {
    font-size: 36px !important;
}
}

    Please change it or remove it.

    Best regards,
    Rikard

    March 6, 2018 at 3:56 pm #922376
    ginnywills

    That is the CSS code that you told me to put in. I changed it from 26px to 36px so I would be able to see the difference but there is none.
    Just to reiterate, I am trying to make the headline bigger on the home page slideshow on the phone.

    Thanks.

    March 7, 2018 at 5:33 am #922729
    Rikard

    Hi,

    This is now the active CSS:

    @media only screen and (max-width: 767px) and (min-width: 480px) {
.responsive #top .slideshow_caption h2 {
    font-size: 26px !important;
}
}

    26 pixels is what you wanted, right? If not then please increase the value.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.