[Resolved] my webiste is not responsive

[Author]

Posts

[vincentJ]

Hello,

i thought that the grid i made could be responsive... but it's not...
can you tell me how to do ?

hidden link

I made an archive template with a loop grid with 4 posts per line.
Here is the code:
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start - ->
<table width="100%" class="wpv-loop js-wpv-loop">
<wpv-loop wrap="2" pad="true">
[wpv-item index=1]
<tr>
<td>
[wpv-post-body view_template="blog-stories"]
</td>
[wpv-item index=other]
<td>
[wpv-post-body view_template="blog-stories"]
</td>
[wpv-item index=2]
<td>
[wpv-post-body view_template="blog-stories"]
</td>
</tr>
[wpv-item index=pad]
<td></td>
[wpv-item index=pad-last]
<td></td>
</tr>
</wpv-loop>
</table>
<!-- wpv-loop-end -->
[wpv-pager-archive-prev-page]
[wpml-string context="wpv-views"]Previous[/wpml-string]
[/wpv-pager-archive-prev-page]
[wpv-pager-archive-next-page]
[wpml-string context="wpv-views"]Next[/wpml-string]
[/wpv-pager-archive-next-page]
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

And then i used divi builder to create the presentation of each 4 posts.

Thanks for your help asap
i need to put online the website really soon!

[Shane]

Hi Vincent,

Thank you for getting in touch.

I see you are using the Tables Grid, however for this to be responsive you will need to use the bootstrap grid layout.

In order to use the bootstrap grid please ensure that Bootstrap is enabled. This can be done by going to Toolset -> Settings and scrolling down to Bootstrap loading. From here you can let toolset load bootstrap 3.

From here you can go back to your View and edit the view again to use the Bootstrap Grid by using the Loop Wizard.

Please let me know if this helps.
Thanks,
Shane

[vincentJ]

Well,

it's not clear for me 😉
can you write for me the good code that i need to put instead of this one previewsly?
Note that i built the template with divi. Does it still works with divi?

[vincentJ]

i need help step by step cause ur plugin is complex ^^

[Shane]

Hi Vincent,

Thank you for the clarity on this. I recognise now that you are using the divi theme, which is not compatible with Bootstrap.

If you had already enabled it from my previous response please disable it because we will have some conflict. I had handled a similar ticket like this previously and the setup a grid for that user.

Could you replace your code in the loop output editor with this and let me know if the grid is showing up now ?

<!-- wpv-loop-start -->
<div class='et_pb_row et_pb_row_0 et_pb_row_4col'>
    <wpv-loop wrap="4" pad="true">
        [wpv-item index=1]
            <div class="et_pb_column et_pb_column_1_4 et_pb_column_0    et_pb_css_mix_blend_mode_passthrough">
              <div class="et_pb_module et_pb_text et_pb_text_0 et_pb_bg_layout_light  et_pb_text_align_left">
                <div class="et_pb_text_inner">
                [wpv-post-body view_template="blog-stories"]
                </div>
              </div>
      </div>
        [wpv-item index=other]
            <div class="et_pb_column et_pb_column_1_4 et_pb_column_0    et_pb_css_mix_blend_mode_passthrough">
              <div class="et_pb_module et_pb_text et_pb_text_0 et_pb_bg_layout_light  et_pb_text_align_left">
                <div class="et_pb_text_inner">
                [wpv-post-body view_template="blog-stories"]
                </div>
              </div>
      </div>
        [wpv-item index=4]
            <div class="et_pb_column et_pb_column_1_4 et_pb_column_0    et_pb_css_mix_blend_mode_passthrough">
              <div class="et_pb_module et_pb_text et_pb_text_0 et_pb_bg_layout_light  et_pb_text_align_left">
                <div class="et_pb_text_inner">
                [wpv-post-body view_template="blog-stories"]
                </div>
              </div>
      </div>
        [wpv-item index=pad]
            <div class="et_pb_column et_pb_column_1_4 et_pb_column_3    et_pb_css_mix_blend_mode_passthrough"></div>
        [wpv-item index=pad-last]
            <div class="et_pb_column et_pb_column_1_4 et_pb_column_4    et_pb_css_mix_blend_mode_passthrough"></div>
         
    </wpv-loop>
</div>
    <!-- wpv-loop-end -->

Please let me know as soon as possible the results of this. It should be noted that there isn't a defined way to create a grid with the Divi theme without using the table setup. So for now this is the best option by using the divi classes to mimic their grid.

Thanks,
Shane

[vincentJ]

Hello, well
i manage to do it responsive for phones, but nor for "Tablet portrait". if you have a look at the page:
hidden link
and,
hidden link
on the responsive tool chrome for developper, you see that responsive is not working...

->>>>>i created this code for the loop:
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<div class="container wpv-loop js-wpv-loop">
<wpv-loop wrap="2" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-sm-6">[wpv-post-body view_template="loop-item-in-view-12"]</div>
[wpv-item index=other]
<div class="col-sm-6">[wpv-post-body view_template="loop-item-in-view-12"]</div>
[wpv-item index=2]
<div class="col-sm-6">[wpv-post-body view_template="loop-item-in-view-12"]</div>
</div>
[wpv-item index=pad]
<div class="col-sm-6"></div>
[wpv-item index=pad-last]
<div class="col-sm-6"></div>
</div>
</wpv-loop>
</div>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

->>> and this code for the template:
<div style="border-style:groove; border-color:#333;border-top-width:2px;border-right-width:1px;border-left-width:1px; border-bottom-width:0px; text-align:center;/*box-shadow: 0px 2px 0px 0px black;*/text-align: left;"><div style="max-width: 100%;"> [wpv-post-featured-image size="et-pb-portfolio-image-single"]</div><br>
<div style="padding-left: 29px !important;margin-left:10px;">[wpv-post-taxonomy type="lieu"]
<h1 style="padding-top: 20px;font-style: italic; ">[wpv-post-link]</h1>
<p class="averta" style="font-family: 'Averta regular',Helvetica,Arial,Lucida !important;">[wpv-post-taxonomy type="secteur"]
[wpv-post-excerpt length="50" count="word" more="Lire plus +"]</p><br>
</div>
</div>

please, see attached image also

[vincentJ]

Please, can u reply me asap???
this

[Shane]

Hi Vincent,

Sorry for the delayed response in getting back to you.

Taking a look at this I was able to see the issue, however I see that you are using Bootstrap along with Divi, which is not recommend as the divi css and bootstrap css they overlap so issues can occur.

I would recommend disable the Toolset bootstrap loading. Also are you using the structure that I provided in the link below?
https://toolset.com/forums/topic/my-webiste-is-not-responsive/#post-1229999

Thanks,
Shane

[vincentJ]

I tried but it's not working...

yes I am using divi. But, last time, I used divi for creating the template loop. Now, I did It again, and used bootstrap.
So if you go on the page I sent you, you will see that it's working for mobiles and other devices, except the ipad device

[Shane]

Hi Vincent,

Would you mind allowing me to have access to the site to look at this for you

Thanks,
Shane