Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 26, 2018 at 8:09 am #947112
    ehdavies

    Hi Enfold support

    You kindly helped with changing the number of buttons displaying on this thread.

    https://kriesi.at/support/topic/buttons-on-tablets/

    It has stopped working. I’ve checked my other CSS and can’t find the conflict. Do you mind taking a look for me please?

    Thanks

    Huw

    April 27, 2018 at 9:34 am #947746
    Victoria

    Hey ehdavies,

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

    That code works only for these screen sizes (max-width: 768px) and (min-width: 481px). Is this ehat you need?
    Which screen sizes do you need the two buttons size by side?

    Best regards,
    Victoria

    April 27, 2018 at 11:39 am #947864
    ehdavies

    Hi Victoria

    On page id 4952 av_section_3 the 4 green buttons (and text underneath each) show side by side on desktop and tablet landscape. This reflects the 4 columns on this part of the section.

    Then on tablet portrait and mobile landscape/portrait devices the columns respond and become vertically stacked.

    On tablet portrait (max 768px) and possibly mobile landscape (max 568px) I’d like this to display 2 columns across by 2 rows. This would be the 3rd and 4th column displaying on the second row.

    The code used to work but I think I’ve done something else that is in conflict?

    Scruffy mock up here

    View post on imgur.com

    Thanks for your help

    Huw

    April 30, 2018 at 9:48 am #948916
    Ismael

    Hi,

    Thank you for the update. Looks like you managed to adjust the width of the columns on iPad view.

    Screenshot: https://imgur.com/a/jsrozVn

    If this is not what you’re after, try to adjust the previous css media query’s viewport values.

    @media only screen and (max-width: 768px) and (min-width: 481px) {

    Replace it with:

    @media only screen and (max-width: 1024px) and (min-width: 768px) {

    Best regards,
    Ismael

    May 1, 2018 at 6:51 am #949379
    ehdavies

    Ismael
    Thanks for the reply. Its strange. When I look at this I don’t get 2 columns across like your screenshot – even where I adjust the max width. Please can you have another look?
    Thanks again
    Huw

    May 2, 2018 at 3:05 pm #950096
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    @media only screen and (max-width: 769px) and (min-width: 480px) {
.responsive #top #wrap_all .flex_column.button-col {
    width: 50%;
}}

    Best regards,
    Yigit

    May 2, 2018 at 7:33 pm #950224
    ehdavies

    Hi Yigit
    I really appreciate you looking at this but it still isn’t working for me in view mode. When you select tab view you can see the screen (very) briefly dismay 2 buttons across and then it goes to 1 button across?
    Huw

    May 4, 2018 at 5:23 am #951283
    Ismael

    Hi,

    Where are you testing it? What device? Please try to adjust the css media queries in accordance with the devices’ screen resolutions.

    // https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Best regards,
    Ismael

    May 7, 2018 at 10:23 am #952571
    ehdavies

    Hi Ismael. It seems to view on the mac but not the macbook when I view the different device sizes. So let’s close for the time being.

    Thanks

    Huw

    May 8, 2018 at 6:31 am #953131
    Rikard

    Hi Huw,

    Thanks for the feedback, I’ll leave this open in case you should need any further help on the topic.

    Best regards,
    Rikard

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