Fading Text as screen size decreases

Support
#1

Hi there,

I was hoping you could help me out with a few things on this page http://www.eurasianwhispers.com/shop-2/

I am essentially trying to recreate the effect that you see on the book information when you resize this page https://www.penguin.co.uk/search/?charset=UTF-8&q=russia

  1. On my page I am dealing with section two, which is in the brown box. In it is one row with two columns - can you please tell me how I can force the row to keep the two columns next to one another as the screen width is decreased, rather than making one go on top of the other?

  2. Can I please free the text in the right column to run below the bottom margin of the column when the screen decreases but that when it goes past this point the excess text fades out, just as it does in the example here https://www.penguin.co.uk/search/?charset=UTF-8&q=russia

I will attach my login details in case it is useful for you.

Thank you!
EW

#2

Hello There,

Thanks for writing in!

1.) To resolve the columns issue, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media(max-width: 480px){
  .el10.x-section .x-column.x-1-3 {
    width: 30.66666%;
    float: left;
  }

  .el10.x-section .x-column.x-2-3 {
    width: 65.33332%;
    float: left;
  }
}

2.) The fade out text is using a custom script and this is already custom development and way beyond the scope of our support.

Thank you for your understanding.

#3

Hi Rue,

I inserted the css but unfortunately it didn’t resolve the issue.

Thank you,
EW

#4

Hello There,

The code will only work for screen sizes smaller than 480. We will increase it and use this instead:

@media(max-width: 767px){
  .el10.x-section .x-column.x-1-3,
  .el20.x-section .x-column.x-1-3,
  .el30.x-section .x-column.x-1-3 {
    width: 30.66666%;
    float: left;
  }

  .el10.x-section .x-column.x-2-3,
  .el20.x-section .x-column.x-2-3,
  .el310.x-section .x-column.x-2-3 {
    width: 65.33332%;
    float: left;
  }
}

Please let us know how it goes.

#5

Hi Rue,

I have updated the code but it’s still not working - you can see that the righthand column of the row still drops below the lefthand one when the screen width decreases past a certain point.

Thank you,
EW

#6

Hey EW,

Sorry for the confusion. As you can see, this requires custom CSS to achieve what you need. @RueNel provided some CSS guidance for you. Further custom development from here including fixes and enhancements would be outside the scope of our support. We do have an in-house custom development team that offer paid services, who may be able to assist you further. They can be contacted at pinnacle@theme.co if this is of interest to you.

Thank you for your understanding.

#7

Hi Christian,

Will it really require me to pay for custom development in order to get this to work?

All I’m asking for is that two columns in the same row are forced to stay next to one another as the screen size decreases, rather than the default of them going on top of one another.

I really can’t see how this would be too complex to require a development team, especially as RueNel initially thought that the change could be made with a simple CSS addition…

I am not trying to achieve the fade-out text anymore, if that is what you are referring to - I appreciate that that is beyond the scope of your support, but getting columns to stay side by side should surely be an option that is easily applied within Cornerstone.

Thank you,
EW

#8

Yes, this requires custom development because this uses custom media queries. I’ll forward your concern as feature request so our development team could take this into account.

Thanks.

#9

OK, Christian, thank you for your help.

Cheers!
EW

#10

Hi @riugn557,

Let us know how it goes.

Thanks.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.