Adjusting the Gap
Between the Left Sidebar and the Body
feat. Blogger Dynamic Views
Today's Contents:
• Adjusting the Width of the Left Sidebar
• Changing the Left Margin of the Body
Hi, Radiant Guys! I wonder if everyone is staying safe and peaceful. In the last post, we learned how to add and delete a category gadget to the right sidebar. This method was very useful when creating a new category menu using the labels of posts.
As you see, I'm using a free theme called "Dynamic Views" from Google and the "Sidebar" is my default view that appears as opened first. However, the left sidebar and the right body area are too close to each other, and the right area in the whole view is too much empty, so the overall composition of the view seems unstable visually. I am really curious as to why it was born this way.
So, in today's post, I'll introduce a way to modify this part so that the composition of the entire view looks balanced. Let's get started.
| Issues that occur when only the width of the left sidebar is adjusted wider
⎖ The Default Look of the Sidebar and the Body
You could see the original view in the image1 below.
 |
[Image1. The default look of the sidebar and the body]⎖ The Look of the Widened Sidebar Only and the Body Not AdjustedIf you wide only the width of the sidebar to make more of the titles that appear on the left sidebar visible, the sidebar and the content of the body will overlap each other. You can see what it looks like when you only increase the width of the left sidebar in Image 2 below. As you can see, the left sidebar area and the right body area overlap, pushing the content of the main text into the left sidebar.  ⎖ The look of the sidebar not adjusted and the widened body onlyIf you keep the width of the left sidebar as the initial setting and only adjust the left margin of the body text to be wider, the space between the sidebar and the body will appear too far, as in Image 3 below, and the visual balance will also appear broken.  Therefore, it is desirable to adjust the width of the left sidebar and the width of the right body at the same time. |
| Adjusting the Width of the Sidebar
The default width of the left sidebar is about 200 pixels. I will change the value to 350 pixels. I put the CSS code in Theme>CUSTOMISE>Advanced>Add CSS. And don' t forget a click on "SAVE" after setting.
| Changing the Left Margin of the Body
You can change the left margin of the body to whatever value you want, but I set it to 400 pixels. I set the CSS code in Theme>CUSTOMISE>Advanced>Add CSS. And don' t forget a click on "SAVE" after adjusting.
Congratulations!
Radiant Guys! Today, we practiced how to adjust the gap between the left sidebar and the body in a Dynamic Views theme in a practical and beautiful way.
First, I widened the width of the sidebar so that the titles of the posts that appear in the sidebar can be seen more. So, you can quickly guess the content just by looking at the title.
Second, I widened the width of the left margin of the body to adjust the space between the body and the left sidebar to a more attractive view. To do this, I 미also used the CSS code that is in charge of decoration in the coding.
As a result, I was able to make the titles in the sidebar more appeared, which helped me understand the content, and also created a much more stable composition visually.
I wonder what enjoyment you got from this post. It might seem a bit difficult at first glance, but I am sure that if you follow my guides step by step, you will be a great web designer.
In the next post, I'll show you guys how to make each post title all appeared in the sidebar even if it has a long title. I hope you remember that you are already a blessing and a miracle ever, and I'll see you next time.
Posted by Ayul
