Home › Forums › WoodMart support forum › 1 Product in Product Grid on mobile entire length

1 Product in Product Grid on mobile entire length

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • April 18, 2018 at 7:59 pm #53223

    nephyhlim
    Participant

    Hey there

    this problem was not resolved. I wanted to know how I can get 1 Procuduct to show on the entire screen on mobile. See rectangle on screenhot, this is how big prouct image shoul be.

    Would love to get it this way

    Attachments:
    You must be logged in to view attached files.
    April 19, 2018 at 8:02 am #53296

    Elise Noromit
    Member

    Hello,

    Enter each row in inner rows/columns, switch to Design Options tabs and set zero in paddings and margins http://prntscr.com/j78n9x the vertical gap will be reduced.

    If you want to have full width content set this option in the main row: http://prntscr.com/j78pi8

    Best Regards

    April 19, 2018 at 8:08 am #53297

    nephyhlim
    Participant

    sorry, wrong post

    April 19, 2018 at 9:24 am #53317

    Elise Noromit
    Member

    Hello,

    Have you solved that?

    Best Regards?

    April 19, 2018 at 6:41 pm #53459

    nephyhlim
    Participant

    Hey Elise

    thank you the vertical gap was removed, but the content is not stretched on mobile even after I did what you said ;-(

    April 19, 2018 at 8:57 pm #53479

    Elise Noromit
    Member

    Hello,

    First of all, I am checking Theme Settings > Custom CSS these fields does not work. Please deactivate all the plugins not related to the theme and activate one by one to find out the conflicting plugin.

    Next, you have created the template (row) using the limited width of columns and offset. In such configuration, the content would not full width. More details in private field.

    Best Regards

    April 20, 2018 at 12:22 pm #53588

    nephyhlim
    Participant

    Hi

    how do I see the private content?

    April 20, 2018 at 1:55 pm #53603

    Elise Noromit
    Member

    Hello,

    Sorry, here is the content:

    Check the editing mode of this page https://www.cociparties.de/2018/04/19/testing-product/

    You can use this template – navigate to Template library http://prntscr.com/j7jt34 and choose “product grid”, add in the page, you can drag and drop the row in any place of the page.

    You will need to add custom CSS from page settings (testing page) into Theme Settings > custom CSS but these fields are broken now.

    Best Regards

    April 20, 2018 at 3:21 pm #53634

    nephyhlim
    Participant

    Hi

    i tried out the element but it still shows small

    https://www.cociparties.de/test-product-grid/ (remember it is on staging environment)

    Custom CSS is working, I can see the boxes.

    What code do I need to apply?

    PS: Your page https://www.cociparties.de/2018/04/19/testing-product/ gives back an 404

    See imag attachedB

    Attachments:
    You must be logged in to view attached files.
    April 20, 2018 at 6:10 pm #53651

    Elise Noromit
    Member

    Hello,

    In order to view the testing page enter admin area as an authorized user. this page in draft status. View this page on all the devices. Add this template to your page as I described below. Take CSS from Page Setting in the Testing page, add to Custom CSS of your
    Your existing template is not editable.

    Best regards

    April 20, 2018 at 6:49 pm #53658

    nephyhlim
    Participant

    Hey Elise

    sorry I dont see the page as draft. Could you please just give me the CSS code.

    The element is in the library though, thank you.

    April 20, 2018 at 8:13 pm #53661

    Elise Noromit
    Member

    Hello,

    Here is the CSS code: 

    .products:not(.categories-style-carousel) .product {
    padding-left: 5px;
    padding-right: 5px;
    min-width: 100%;
}

    Here is the shortcode of the template I have created. 

    [vc_row][vc_column][vc_row_inner][vc_column_inner width="5/12"][woodmart_products post_type="ids" items_per_page="1" columns="1" include="22351" img_size="full"][/vc_column_inner][vc_column_inner width="7/12"][woodmart_title size="custom" color="primary" align="left" title="Nur für kurze Zeit" desktop_text_size="42" css=".vc_custom_1523735934830{margin-bottom: 10px !important;}" tablet_text_size="36" mobile_text_size="30"][vc_column_text el_class="text-larger" css=".vc_custom_1523735972601{margin-bottom: 25px !important;}"]Diese tolle Ballongirlande zaubert eine fabelhafte Deko an jede Wand und macht mächtig was her.

Das Set besteht aus 31 Ballons, Befestigungsclips, Schnur, 3 Papierblättern, Klebepads und einer Anleitung.

Nur für kurze Zeit im Angebot, also am besten noch heute zuschlagen![/vc_column_text][woodmart_countdown_timer size="large" align="left" date="2018/04/29"][woodmart_button color="primary" style="bordered" size="large" align="center" title="Jetzt ansehen" link="url:https%3A%2F%2Fwww.cociparties.de%2Fprodukt%2Fballongirlande-rosa-deko-kindergeburtstag-maedchen-pink-ballon%2F|||"][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]

    Enter the page, go to Classic Mode > Text http://prntscr.com/j7znxm and paste in the very button, then switch back to Back end mode and drag and drop the template in the place you need.

    Best Regards

    April 20, 2018 at 9:02 pm #53663

    nephyhlim
    Participant

    AAAWESOME, it finally worked! Thank you very very much and have a great weekend!

    April 21, 2018 at 8:30 am #53687

    Elise Noromit
    Member

    You are always welcome! If you have any questions feel free to contact us.

    Best Regards

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

The topic ‘1 Product in Product Grid on mobile entire length’ is closed to new replies.