Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • May 7, 2015 at 1:46 am #440707
    rpl_admin

    We have a full width slider with a caption on the right hand side. Looks fine above 768, but on 768 the content goes on to two lines and on smaller screens it renders on the left hand side (covering the most important area of the background image). We’d like it to render the same on smaller screen sizes as it does above 768.

    Many thanks.

    May 7, 2015 at 8:57 pm #441227
    Elliott

    Hi rpl_admin!

    Try adding this to your custom CSS.

    .slideshow_align_caption {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0px, -50%);
  width: 200px;
}

    Regards,
    Elliott

    May 8, 2015 at 3:48 am #441342
    rpl_admin

    Hi Elliot,

    Nearly there, thanks. Unfortunately, the caption is still too far to the left at 320, and below 480 the ‘Welcome to’ is much bigger then the TruLern Ltd instead of being visa-versa.

    Robert

    May 8, 2015 at 8:51 pm #441766
    Elliott

    Hi!

    Add this.

    .slideshow_align_caption { width: 170px !important; }

    Cheers!
    Elliott

    May 9, 2015 at 3:03 am #441839
    rpl_admin

    Hello Elliot,

    That does seem to have resolved the issues at all I’m afraid. Any further suggestions?

    Thank you,

    Robert

    May 11, 2015 at 9:49 am #442304
    Ismael

    Hey!

    Add this:

    @media only screen and (max-width: 480px) {
.slideshow_align_caption {
  text-align: right;
}}

    Cheers!
    Ismael

    May 12, 2015 at 3:20 am #442786
    rpl_admin

    Hi Ismael,

    Many thanks. That works in part but still have the text size problem.

    Robert

    May 12, 2015 at 8:34 pm #443347
    Yigit

    Hey!

    Can you please post a screenshot and show the text size problem you are having? Text size should be decreased on screens below 767px. Please make sure to flush browser cache on your mobile device

    Regards,
    Yigit

    May 13, 2015 at 10:48 am #443677
    rpl_admin

    Hey Yigit,

    Hope you’re well.

    If you go to the home page of the site (please see Private Data in Original Post), and in Firebug for example, on smaller screens you’ll see that the text does get smaller but unfortunately the text in the highest position on the page – in this case the words WELCOME TO – does go much smaller while the text under it – in this case the words TruLern Ltd – get much smaller. So whereas on larger screens we have a smaller “Welcome to” and a larger TruLern Ltd (which is what we want) on smaller screens we have a large WELCOME TO and a very small TruLern Ltd (which is the opposite of what we want).

    Thanks,

    Robert

    May 14, 2015 at 11:33 am #444234
    Ismael

    Hi!

    Replace the code with this:

    @media only screen and (max-width: 480px) {
.slideshow_align_caption {
  text-align: right;
}

.responsive #top .slideshow_caption h2 {
  /* font-size: 10px !important; */
}

.responsive #top .slideshow_caption .avia-caption-content {
  font-size: 14px !important;
}}

    Adjust the font size. I’m sure you know which is which.

    Cheers!
    Ismael

    May 14, 2015 at 1:24 pm #444263
    rpl_admin

    Hi Ismael,

    Many thanks – that’s done the trick.

    Cheers,

    Robert

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Caption / 768 & Screens’ is closed to new replies.