-
Posts
-
I am a beginner with WordPress and BoldGrid, so apologies if this is an embarrassingly simple question. I want to build a responsive site that centre-aligns blocks when the browser window width exceeds the block width. My blocks always align to the left of the browser window. I have searched the BoldGrid interface carefully and tried everything I can find that seems relevant but nothing will shift the block from the left edge. I think, but I am not absolutely sure, that I did not have this problem before upgrading WordPress to version 4.9. BoldGrid and all my plugins are up to date.
Hello Clive,
Thanks for submitting a question about center-aligning blocks on the page.
Once you have a chosen column selected, you can click the three horizontal bars to show the Advanced Control button. Here, you are able to select the horizontal alignment, which can be set to “Center.”
Which BoldGrid theme are you working on?
Best,
Christopher M.
Thanks for your prompt reply. I have already tried this without success. I am using the Wedge theme. I am using a block like ‘Client Testimonials’ which contains a number of columns. In these circumstances, I can’t find a column that represents the whole block so I have used the 3-bar menu that appears below the block. I take this to be a control for the whole block. Selecting ‘left’, ‘right’ or ‘center’ has no effect. The block always aligns left. I have tried setting the width to less than 100% but that does not help either.
Hello Clive,
Sorry for the problem with the issues with centering the block in the Wedge theme. Since you’re making conditional upon the Window size (responsiveness of a website is not based on the block size – changes happen based on the window display size), you would have to make changes in the CSS code to make that happen. Center aligning the blocks would not make the site “responsive”. Making a responsively designed website involves much more than simply making sure all the blocks line up in the middle of the screen. I re-read your question in order to try to understand what you’re saying. Are you sure you’re not looking at the text as left-aligned and not the text? If you want a block that ‘s always center-aligned then you can select a new block, add it to your website, then edit it so that the right and left blocks are deleted. This will insure that your block remains centered. You can also leave the text in the middle, change the size of the block so that it occupies most of the space and remains centered. Check out this video and see if it represents what you’re trying to do (I am using the Wedge theme):
Copy the video URL and play it in your browser window or you can play it in the window above. It will show you how I add a block to the page that I’m editing. You can then remove elements in that block, widen it and make sure that it’s always centered. Note that the behavior of change is based on the screen size. I show the differences and how it reacts when I make the window smaller. If you’re referring to the text position, you would need to play with the margins and formatting options for the text so that it is located where you want it specifically.
If you want to control the behavior based on the size of the screen then it requires changing the code because it is not a normal behavior for the theme. The CSS code you would need to use is a media query. This will allow you to set the behavior based on the window size.
I hope this helps to clarify and explain the issue! Please let us know if you have any further questions.
- The topic ‘How can I make blocks centre align in a wide browser window?’ is closed to new replies.
