Home › Forums › WoodMart support forum › Different layout in mobile and desktop infobox

Different layout in mobile and desktop infobox

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • November 18, 2020 at 12:48 pm #242594

    IbrahimY
    Participant

    Hi there,

    I have a important question. I know there is a possibility within your theme to disable/hide some functions and rows for mobile and yet to show them in desktop.

    However is there a posibility to show things on mobile and hide on desktop.

    Second question little bit related.

    I know I can create an information box with your theme. But this box shows full width on mobile yet I want to have these splitted in 2 per row on mobile.

    Below I explained it with images.

    See as example printscreen on mobile: https://snipboard.io/YI3cCo.jpg
    see same example printscreen on desktop: https://snipboard.io/8hR3Ap.jpg

    Cause when I try create an example page look a like as the printscreen with your theme I get the following with the information box.

    See example with your theme on mobile : https://snipboard.io/wr0Apv.jpg
    See example on desktop with your theme : https://snipboard.io/syGCiH.jpg

    The design coloring I don’t ask. I want on mobile 2 rows/block/boxes next to each other.

    Hope to here from you.

    regards,
    ibrahim

    November 18, 2020 at 5:12 pm #242672

    Elise Noromit
    Member

    Hello,

    However is there a possibility to show things on mobile and hide on desktop. – please provide the page URL and what elements you want to hide? You should insert them into the separate columns and hide columns. Alternatively, I can provide custom CSS to hide elements.

    Please provide the page URL and I will provide custom CSS to show two times in a row on mobile.

    Best Regards

    November 18, 2020 at 11:38 pm #242724

    IbrahimY
    Participant

    Hi Elise,

    I think I found it. I have now things working, 2 blocks on mobile however remaining 1 thing. I can’t get it same height. Offcourse I used the checkbox in the column but not working.

    I tried to use the id=”wd-5fb5adcbb90d4″ it is provided class=”woodmart-button-wrapper”

    #wd-5fb5adcbb90d4 {
    padding-top: 39px;
    }

    But after saving the id changes of the woodmart button.

    Why am I using this or want to use. I thought to creat a margin so I could equal the buttons same height as all blocks.

    Maybe you have a solution. But mentioning your previuos message it helped me to create 🙂

    If you can tell me how to do this maybe I can do it afterwards myself.

    Waiting for your answer.

    Regards,

    Ibrahim

    November 19, 2020 at 9:58 am #242832

    Elise Noromit
    Member

    Hello,

    Please provide the page URL and site admin access I will check what is possible to do.

    Best Regards

    November 19, 2020 at 12:08 pm #242869

    IbrahimY
    Participant

    Hi Elise,

    The page information I provided in the private section.

    As I said i have created the mobile things as you said but I cant get them to equal height.
    I need to do this also on tablet versions and smaller screen.

    After you are done, can you tell me what you did. So in the future i don’t have to ask you for these things. Then I can manage it myself for other pages.

    Many thanks in advance.

    regards,
    ibrahim

    November 20, 2020 at 9:02 am #243096

    Elise Noromit
    Member

    Hello,

    You need to set the width in these fields https://gyazo.com/fadbd728daa909cd6980e779c7fcc29b here is the video tutorial: https://wpbakery.com/video-academy/control-elements-different-devices-responsive-column-controls/ and https://wpbakery.com/video-academy/responsive-column-control-width-offset-param-usage-explained/

    If you, for example, hide one column on a certain device, make others width accordingly. If you have three columns and hide one, increase two others for 0.5 of the width of the column you hide. Then if you will need I will provide custom CSS to correct the remaining.

    Best Regards

    November 20, 2020 at 11:15 am #243133

    IbrahimY
    Participant

    Dear Elise,

    I allready did this before. If you scrolled little bit down in the backend I had allready created a version for mobile. Cause if I do it your way it gives problems with the buttons en icon height.

    https://snipboard.io/9mnOzS.jpg
    https://snipboard.io/ZbYUuz.jpg

    This is what i wanted to get them in 1 line see printscreen.

    I think I need custom css or another option to do so.

    Thanks in advance.

    regards,

    Ibrahim

    November 21, 2020 at 12:58 pm #243359

    Elise Noromit
    Member

    Hello,

    Please try to deactivate add-ons and builder plugins not related to the theme and check the issue.

    I suspect they influence the incorrect Infobox display.

    Best Regards

    November 23, 2020 at 11:52 am #243830

    IbrahimY
    Participant

    Dear Elise,

    I can confirm it has nothing to do with another plugin.

    The reason is simple, one box contains more words/content than the other one. It is that simple.

    But it automatically adjust to that size. What I am asking is to get everything the same size. This has nothing to do with other plugins cause it is working just fine.

    If use the same amount of words the info boxes show at the same height. You only have to tell me how to get them at all time same height.

    Kind regards,

    Ibrahim

    November 24, 2020 at 9:47 am #244155

    Elise Noromit
    Member

    Hello,

    If the different blocks have a different scope of content, it is not possible to make them one size. I cannot set the fixed prices either as it would not be responsive.

    Best Regards

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)