[Resolved] How to style my view page

[Author]

Posts

[Christos]

Hello there!

Can you please show me how to make my view page look like this example? hidden link. (full width view output, no gaps between photos, dynamic text fields on the photo, not below etc)
I'm using toolset blocks.

[Waqar]

Hi Christos,

Thank you for contacting us and I'd be happy to assist.

For design changes like these for which, built-in controls are not available in the blocks editor, you'll need to include custom CSS code.

As much as we would like to help, 1-1 custom code assistance is beyond the scope of the support that we can provide. But we do our best to guide in the right direction, whenever possible.

To check which CSS code is applying to different page elements, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link

For example, you'll note that the container which wraps the search results has the class names "container wpv-loop js-wpv-loop".

To target them with custom CSS code to cover full page width, you can use:

.container.wpv-loop.js-wpv-loop {
width: 100%;
max-width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;	
}

Likewise, you can reduce the padding between the grid elements so that the images have less gap, in-between.

For showing text content as image overlay, following guides and tutorials should help:
hidden link
hidden link
hidden link

regards,
Waqar