[iamwithUParticipant]

Hi,
I tried to understand each of the Elements and experiment using them. But I still have no clue what is the Block Grid about. I tried to read your documentation and watch the demo. But still clueless. Will you be so kind to say in a gist what Block Grid does?

I have a Block Grid, by downloading a template in Cornerstone. I inserted an image into one of the columns. It looks ok on the Desktop view. But on the Mobile Phone view, the image is too big. What should I do? How do I insert codes to specify the smaller size of the image?

The spacing of my text (in between lines of text) inside the Block Grid is too wide. On the Mobile Phone view, the text is too sparsely spaced from top to bottom. How do I reduce the vertical spacing?

Can you provide a generic answer, not peculiar to my design, so that I can learn your advice?

I’m a beginner, so any alternative suggestions in layman’s terms will be helpful.

[RadModerator]

Hi there,

Thanks for writing in.

Block grid is similar to columns with just different breaking point, and you’ll have to manually add content instead of “drag and drop” functionality. About the image issue, it could be related to something else, would you mind providing your site’s URL?

Thanks!

[iamwithUParticipant]

Hmm.. don’t understand what is meant by “different breaking point”. When do we use Block Grid, and when do use the usual columns?

Do “breaking points” mean the point where the text goes to a different column? How does this breaking point kick-in?

The spacing of my text (in between lines of text) inside the Block Grid is too wide. On the Mobile Phone view, the text is too sparsely spaced from top to bottom. How do I reduce the vertical spacing?

Can you provide a generic answer, not peculiar to my design, so that I can learn along the way?

[JoaoModerator]

Hi There,

Breaking points is when the screen size point where different CSS is applied to your website in order to make the website responsive so when you look your website in desktop the columns stack on each other for example and your content is “more readable”

The block grids will have a different Breaking point and you will use when you use, it is a tricky question without a simple answer, because there is always a creative way of using every element and some designer will have an approach while other another, but generally I would say you use it, when you want part of your layout to be a bit different from the rest in smaller devices and keep the “magazine columned feeling (I guess columned is not even a word, but I hope you can understand)”.

I guess the best is to build the content with and without the block grid and compare the results and choose it.

But of course if you like the way the Block grid looks and you want us to help with a bit of adjustment, just ask 🙂

So I believe to fix your issue you can add this following code to your Appereance / Customizer / Custom / CSS

.x-block-grid>li {

margin: 2% 2% 0 0;

}

Let us know if you need further help.

Joao

[iamwithUParticipant]

Tks a million, Joao. Again what a privilege to have you here – you’ve enlightened me about Block Grid:)

Hoping to learn along the way, can you kindly share what is the significance of “li” in your code?

.x-block-grid>li {

margin: 2% 2% 0 0;

}

Grateful!

[RahulModerator]

its an abbreviation for “list item”. It makes sure that the css gets applied to the item which it is supposed to.

Thanks

[iamwithUParticipant]

In order for me to learn from the above, can you be so patient to explain:

a) what’s the difference in using “li” and not using “li”?

b) If I did not use Joao’s code “margin: 2% 2% 0 0”, what would be the default? If without this code, what would the margin be then?

c) How do I apply this “margin: 2% 2% 0 0” to another page, e.g. the “shop page” or “product page” which is under Woocommerce?

[RupokMember]

Hi there,

Thanks for updating but your questions are very basic and you must know them if you really want to build a website. I’d suggest you to explore our Knowledge Base first before getting started. It will help you to gain knowledge and save your time.

Cheers!

[iamwithUParticipant]

Hi Joao,
Can you help me here. I’ve read the KB and have done some progress on my website. I just need to fine-tune my margins.

I can start a new thread, but I need to refer to your code above which helped me. (see your reply on May 16)

a) what’s the difference in using “li” and not using “li”?

b) If I did not use your code “margin: 2% 2% 0 0”, what would be the default? If without this code, what would be the margin then?

c) Can I apply this “margin: 2% 2% 0 0” to another page, the “shop page” or “product page” which is under Woocommerce?

Appreciate your patience very much.

[LelyModerator]

Hello There,

Block grid is the element. It is made of list HTML tags. When we view the source of the block grid it is something like this:

<ul class="x-block-grid two-up">
<li class="x-block-grid-item">Content Goes here</li> 
<li class="x-block-grid-item">Content Goes here</li> 
<li class="x-block-grid-item">Content Goes here</li> 
<li class="x-block-grid-item">Content Goes here</li> 
</ul>

In CSS we do refer to it as li to style it.So the CSS that we need to add will depend on what type of element you have use. Different Elements are made of different HTML tags.

To help you better, please share the specific page where you have styling issues. Then give us clarification what’s the issue and what do you want to achieve.

Hope this helps.

[iamwithUParticipant]

Hi Lely, thanks for quick reply.

I have a “Shop” (or “product”) page under WooCommerce. It has too much empty space at the bottom of the page. I want to learn how to remove the space.

I read in your KB about using codes like “margin bottom none”, “padding bottom none”.

But I’m not sure how to put into tags onto the “Shop” page. Unfortunately that page cannot be edited in Cornerstone. The WordPress editor for this page has a field as follows:

“Body CSS Class(es)
Add a custom CSS class to the <body> element. Separate multiple class names with a space.”

What should I put inside that field to remove the empty space at the bottom of the whole page?

Appreciate your help to a beginner.

[JoaoModerator]

Hi There,

It is possible by adding CSS via Appeareance / Customizer / Custom /CSS

If you would like to learn more about it I recommend you to look some youtube videos about how to make changes in WordPress via CSS or CSS in general, there is a really cool youtube channel called Devtips, have a look, you will be amazed.

in the meanwhile if you would like us to help you with your specific website, please provide the URL of the page you are working on and we will be able to help you.

Thanks,

Joao

[iamwithUParticipant]

I went to Devtips but couldn’t find anything that helps.

Joao, just as you previously gave me the code for Block Grid and adjusted my margins, can you give me a sample code for my product page in Woocommerce?

The code you gave me that helped me was:
.x-block-grid>li {

margin: 2% 2% 0 0;

}

I just want to remove the blank space at the bottom of the page. I know I have to put something like “margin bottom none”. What would be a sample code that can be inserted via WordPress Dashboard Editor for a product page?

[Rue NelModerator]

Hello There,

Joao gave you a code for the block grid and that will only be for that element. The grid in the shop page and in your product page is presented differently though it is still using grid like layout. They have their own styling. Unless you are actually using the block grid within the page. Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you for your understanding.

[iamwithUParticipant]

Thanks Rue Nel for your kind offer to help.

As mentioned, I only want to remove the empty space at bottom of a page, which happens to be the “Product” or “Shop” page. It can’t be edited via Cornerstone. Please see picture attached. It’s the same for the Desktop view.

As I’m a beginner and have little knowledge on CSS or coding, I just need a little tip. What code should I use? An example of the code given by Joao was:
.x-block-grid>li {

margin: 2% 2% 0 0;

}

The only difference here it’s not for a “block grid”. May I have just a sample or clue of what code I can use? I’ll fill in the values, such as mbn or pbn.

[Author]

Posts