Okay
  Public Ticket #1803473
button width according text
Open

Comments

  •  1
    Julien started the conversation

    Hello,

    At the end of each of my pages, I created buttons allowing visitors to access the other pages of the site.

    To do that, I created a line of 5 columns with WPBackery, and I created a button in each column. These buttons have a cut-out style, with a photo in the background, a text, and a URL to point to. They fill the full width of the columns.

    The result suits me perfectly for a 1920px computer screen width where all buttons are side-by-side, and for a smartphone screen width where the buttons are one below the other.

    However, depending on the resolution of the tablet screens, it happens that the text of the buttons is split on a second line; and even sometimes all the letters are vertical ... which is not very beautiful!

    I have attached screen prints; you will see the problem on images 2 and 3.
    Is it possible to have the buttons below each other (like picture 4) as soon as the width of a button becomes too small for the length of its text?

    Thanks in advance,

    Julien

    Attached files:  1-good.jpg
      2-not_good.jpg
      3-not_good.jpg
      4-good.jpg

  •  186
    Dev replied

    Nice Idea. 

    That needs some custom coding to force them to break the columns at certain sizes. 

    Please provide me with a temporary admin account and I'll try to do that.

    Thanks

    Alireza

    owwwlab's Developer Team representee

  •   Julien replied privately
  •  186
    Dev replied

    Julien, 

    Please test and see if there is any issue with it now.

    owwwlab's Developer Team representee

  •  1
    Julien replied

    Thank you very much, it's (almost) perfect!

    It works very well for all portfolios, but there is still the problem on the presentation page: http://loreedesnuits.fr/presentation/

    If you want to remodify your Additional CSS, it's the one that starts at line 49.

  •  1
    Julien replied

    I forgot to join the screen print ...

    Attached files:  presentation_page.jpg

  •  186
    Dev replied

    Uh. 

    You just need to go to that page or portfolio from the admin panel. Click on edit icon for the corresponding row element to open the "Row Settings" and for the "Extra class" field at the bottom of settings add this "buttons-row".

    1. http://prntscr.com/lpdygi

    2. http://prntscr.com/lpdypu

    owwwlab's Developer Team representee

  •  1
    Julien replied

    thank you so much