[Resolved] Need your assistance to finish a few other bits.

[Author]

Posts

[lukeM-7]

Thank you, this is great.

I just need your assistance to finish a few other bits.

- The articles should be contained with in a white box that matches the width of the white boxes below
- Can the images be scaled up and centred - basically make the blog image larger and centre
- Same with the name and date text, just centre that please.

THank you very much.

[Luo Yang]

Hello,

Q1) The articles should be contained with in a white box that matches the width of the white boxes below

This is a custom CSS problem, according to our support policy, we don't provide custom CSS codes support.
But in your case, it is very simple, so I have setup a demo in your website:
Edit the post view "latest 3 blogs":
hidden link
1) in section "Loop item in latest 3 blogs", wrap all codes into a HTML div tag:

<div class="white-block">
...
</div>

2) in section "Loop Editor", click "CSS editor", add below CSS codes:

.white-block{
  background: #ffffff;
  border-radius: 16px;
  min-height: 360px;
  margin-bottom: 12px;
}

For your referenence.

More help:
https://toolset.com/documentation/user-guides/adding-custom-css-views/

Q2) Can the images be scaled up and centred - basically make the blog image larger and centre
Yes, you can display the feature image in bigger size, for example:
[wpv-post-featured-image size="medium" raw="false" class="center-block"]
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-featured-image
size (opt):
'thumbnail' (default) | 'medium' | 'large' | 'full' | 'custom'

And use CSS class name "center-block" in above shortcode
hidden link

Q3) Same with the name and date text, just centre that please.
Same as above, you can use a HTML div tag to wrap the name and data text, and add CSS class name "text-center" to this DIV tag, for example:

<div class="text-center">[wpv-post-author]<br />
[wpv-post-date]</div>
</div>

hidden link

[lukeM-7]

Great, many thanks.

I ended up removing the image and author / date on request of the client.

I just wanted to add a left margin to the text now, I created the below class to try and target the white box, but something is'nt right..If I can just get your help to sort this, even though its CSS that would be great and then we are done.

This was my code

.DWBlogStyle {
margin-left: 20px;
}

[Luo Yang]

In your case, I suggest you try CSS padding, for example

.DWBlogStyle {
padding-left: 20px;
}

See screenshot: css-padding.JPG
hidden link

Since you need to style your website with custom CSS codes, it would be better to read some related CSS documents:
https://toolset.com/documentation/user-guides/adding-custom-css-views/#further-reading

Section "Further reading"