Testing the change of width of a widget

demo1wizbangwm · Member · Apr 25, 2016 at 8:10 pm
Copy link

Add topic to favorites
Hello,
I am working on site: https://demo1wizbangwm.wordpress.com/

I read that you can change the width of a widget using CSS. Since I am on the free plan, I wanted to test the change before deciding to buy a Premium Plan. To test the change in width to my front page widget, I went to Customize -> CSS -> and inserted the code below. However, I am not seeing any changes. Any ideas on what I did wrong? Many thanks!

#front-page-widget-area{
width: 800px;
}
thesacredpath · Member · Apr 25, 2016 at 11:22 pm
Copy link
Hi, you are on the right track. A couple things though, front-page-widget is a CSS class, so it starts with a period ( . ) in the CSS. # would be used if it was a CSS id (“id=”front-page-widget-area”).

Also, the widget area is already full-width of the container, so we have to look at the child divs in that section to see which one the width is set in. Using my web inspector, I see that it is set in .front-page-widget, so this would be my suggested CSS to widget that widget out to 800px.
```
.front-page-widget-area .front-page-widget {
    max-width: 800px;
    width: 100%;
}
```
You will notice I have a max width and a width declaration above and have set the max width as 800. If we set width to 800, we will lose the responsive design of that element and it will not resize for smaller screens. 800px is a static width.

By setting and 800px max width and then a width of 100%, we are telling the browser, ‘hey, I want to keep the width of this at 800px, unless the viewport is narrower in which case I want you to keep this as wide as possible’.
demo1wizbangwm · Member · May 5, 2016 at 4:05 pm
Copy link
Hello-
I just realized I never replied. Thank you for your time and coaching on this issue. You answered my question! Have a wonderful day!
thesacredpath · Member · May 5, 2016 at 8:34 pm
Copy link
You are welcome, and you have a good day too. :)

No items found.