[Resolved] Divi – Toolset Template and View Styling Issues

[Author]

Posts

[CharlesB2907]

When a View is active and added to a Divi Text Module using a shortcode, is the styling still being applied to the Homepage View?

I can not see much flexibility in styling the shortcode added to the Divi section and module contained in Homepage New Content template.

In this particular site configuration, is the View or the Divi Template being identified in CSS for styling?

Is the View file being styled or is the template file being styled?

[Shane]

Hi Charles,

So what happens is that views has its own self contained styling. So a view a rendered with basic styling defined by your theme.

If you want to style your view further you will need to use the css editor that is on your view edit page.

Please let me know if this is what you are referring to.

Thanks,
Shane

[CharlesB2907]

So if I seek homepage styling assistance from Divi support, I'm seeking to identify the View in CSS coding specifically and not the Homepage New Template?

I see that the Homepage is one long section, which I assume is due to the combined View shortcode added to the Template.

With everything combined, the Results at the bottom cause the upper portion of the page to jump which looks horrible. The first possible resolution would be to place the Results in its own module and try to style it independently to the other sections but still on the same page.

Can you provide a recommendation?

There are a few other styling issues on the Homepage. Should I list them here or open a new ticket for each?

[CharlesB2907]

The styling issue can be seen in the attached screenshot showing that the Results on the /search-form/ page retains some of the CSS styling but the Homepage View does not.

Note: This is the same shortcode displaying differently on each page.

[CharlesB2907]

Update: I was able to add CSS to display the missing results content in the 3rd column but the featured images are displaying in random sizes instead of a uniform scale. The text block below are also displaying in random formats.

Although the 3rd column now shows, by example, the 4 featured products in the screenshot are the exact same image file size but they are displaying in different sizes. The /search-form/ page does not do this. This distortion has something to do with the homepage search results loop only, as you can see the first page of the results appears to display normally and once you click a pagination link, the columns each seem to display in random ways.

The Single Product List Entry View based on the Divi Custom Template module has style settings that are not being maintained.

Does Toolset have any resource for assistance with this, if so it would be greatly appreciated.

[Shane]

Hi Charles,

I think the problem here is that the images are being displayed at different sizes since they were uploaded like that.

You can force them to be of one size by using the shortcode attributes for the image field.
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-featured-image

Please let me know if this helps.

Thanks,
Shane

[CharlesB2907]

Hi Shane,

I will process your instructions on this issue and update the ticket after.

Can you please start a new ticket for "Toolset – Divi Builder Search Pagination"?
I attempted to do so but was unable to assign it to you.

It saves a lot of time working with an agent who is already fully aware of the development.

[Shane]

Hi Charles,

You can create the ticket "Toolset – Divi Builder Search Pagination" and I can just pick it up from the queue directly.

Thanks,
Shane

[CharlesB2907]

Shane,
Your reply about the image size isn't correct from my point of view. The images must display in the files natural aspect ratio whether that be square, short and wide or tall and narrow.

Those settings were already made obviously because some of the columns display correctly and some down. I will give you a perfect example. From two side by side browser tabs one with hidden link for the homepage and in the other hidden link

Scroll down to the Results on both pages which at this point appear close to the same > click the "next" link 4 times on both pages > you will see a table row of 4 eCollage images which are all the exact same image file size.

On hidden link all of the eCollage images display in the same size which is correct.

On hidden link (the homepage results) the 4 eCollage images which are exactly the same file size, display in four different sizes.

If you followed the instructions and clicked each link and arrived at the same pagination page on both pages, you should clearly see that they are not the same, there is a problem and the image settings that you pointed to is not going to fix this..

Divi support said it has something to do with the Toolset looping beyond the first page of the pagination.

[Shane]

Hi Charles,

If you were to add the menu bar to the homepage would the same size difference occur ?

I realize that if I adjust the size in which the content has to render then the images will auto adjust to best fit the container.

This could be what is happening in your case.

Thanks,
Shane

[CharlesB2907]

If you were to add the menu bar to the homepage would the same size difference occur ?

> As far are I know this is all displayed (entirely) by the shortcode that is added to both pages in the exact same way. What you wrote above makes no sense to me. I added the Toolset shortcode to the homepage exactly the same way it was added to the /search-form/ page

I realize that if I adjust the size in which the content has to render then the images will auto adjust to best fit the container.

????? I'm sorry Shane, I have NO idea what you are referring to here. ?????

The two-page configurations from my point of view are identical.

Early this morning I checked then over side-by-side.

[Shane]

Hi Charles,

As you mentioned the page configurations are the same, however if you noticed that the homepage doesn't have a navigation bar at the top of the page.

This could be why after the results are displaying at 2 different size because the page container has more space to re-adjust.

Thats what I meant.

Thanks,
Shane

[CharlesB2907]

I see what you mean but the homepage cannot have a navigation header and logo because the vertical space is needed for the artwork display.

[CharlesB2907]

I added the top navigation to the home page and will leave it there long enough for you to see that it is NOT the cause of the grid image size distortion.

[CharlesB2907]

Shane,

I'm changing the homepage back by removing the header navigation because it obviously has nothing to do with the results image size distortion.

Is it possible to have the search form on the homepage and when a search query is submitted from that page > the results will show below the form on the hidden link

In other words can two forms in different locations display on a single result page for both?

I no longer have any hope of the results displaying correctly on the homepage and I really need to move on to a different solution.

Please respond.