{"id":6232,"date":"2023-02-06T15:50:40","date_gmt":"2023-02-06T15:50:40","guid":{"rendered":"http:\/\/www.quicksetupguide.com\/blog\/?p=6232"},"modified":"2023-02-06T15:54:28","modified_gmt":"2023-02-06T15:54:28","slug":"changing-the-wordpress-widget-width-using-css","status":"publish","type":"post","link":"https:\/\/www.quicksetupguide.com\/blog\/2023\/02\/06\/changing-the-wordpress-widget-width-using-css\/","title":{"rendered":"Changing the WordPress widget width using CSS"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Situation: The client has a website using WordPress. They feel the WordPress widget is too wide and use too many spaces and would like to change the default size of the iframe containing the widget.&nbsp;Here is how.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Login WordPress administartor account.<\/li>\n\n\n\n<li>Go to <strong>Appearance&gt;Customize<\/strong>. <\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"574\" height=\"988\" loading=\"lazy\" src=\"http:\/\/www.quicksetupguide.com\/blog\/wp-content\/uploads\/2023\/02\/image.png\" alt=\"\" class=\"wp-image-6233\" srcset=\"https:\/\/www.quicksetupguide.com\/blog\/wp-content\/uploads\/2023\/02\/image.png 574w, https:\/\/www.quicksetupguide.com\/blog\/wp-content\/uploads\/2023\/02\/image-174x300.png 174w\" sizes=\"auto, (max-width: 574px) 100vw, 574px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">3. Click on <strong>Additional CSS<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"390\" height=\"1024\" loading=\"lazy\" src=\"http:\/\/www.quicksetupguide.com\/blog\/wp-content\/uploads\/2023\/02\/image-1-390x1024.png\" alt=\"\" class=\"wp-image-6234\" srcset=\"https:\/\/www.quicksetupguide.com\/blog\/wp-content\/uploads\/2023\/02\/image-1-390x1024.png 390w, https:\/\/www.quicksetupguide.com\/blog\/wp-content\/uploads\/2023\/02\/image-1-114x300.png 114w, https:\/\/www.quicksetupguide.com\/blog\/wp-content\/uploads\/2023\/02\/image-1.png 522w\" sizes=\"auto, (max-width: 390px) 100vw, 390px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">4. On the Additional CSS screen, enter the appropriate code for your theme (see below), then click\u00a0Publish to save\u00a0the settings. This is an example CSS codes.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.widgetMode .s1_grid_12,\n.widgetMode .container_12\n{\n   \/* change 400px to any desired value *\/\n   width: 400px !important;;\n   margin-left: 0 !important;\n}<\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"330\" height=\"355\" loading=\"lazy\" src=\"http:\/\/www.quicksetupguide.com\/blog\/wp-content\/uploads\/2023\/02\/image-2.png\" alt=\"\" class=\"wp-image-6237\" srcset=\"https:\/\/www.quicksetupguide.com\/blog\/wp-content\/uploads\/2023\/02\/image-2.png 330w, https:\/\/www.quicksetupguide.com\/blog\/wp-content\/uploads\/2023\/02\/image-2-279x300.png 279w\" sizes=\"auto, (max-width: 330px) 100vw, 330px\" \/><\/figure>\n\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Situation: The client has a website using WordPress. They feel the WordPress widget is too wide and use too many spaces and would like to change the default size of the iframe containing the widget.&nbsp;Here is how. 3. Click on Additional CSS 4. On the Additional CSS screen, enter the appropriate code for your theme &hellip; <a href=\"https:\/\/www.quicksetupguide.com\/blog\/2023\/02\/06\/changing-the-wordpress-widget-width-using-css\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Changing the WordPress widget width using CSS<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-6232","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.quicksetupguide.com\/blog\/wp-json\/wp\/v2\/posts\/6232","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quicksetupguide.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quicksetupguide.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quicksetupguide.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quicksetupguide.com\/blog\/wp-json\/wp\/v2\/comments?post=6232"}],"version-history":[{"count":2,"href":"https:\/\/www.quicksetupguide.com\/blog\/wp-json\/wp\/v2\/posts\/6232\/revisions"}],"predecessor-version":[{"id":6239,"href":"https:\/\/www.quicksetupguide.com\/blog\/wp-json\/wp\/v2\/posts\/6232\/revisions\/6239"}],"wp:attachment":[{"href":"https:\/\/www.quicksetupguide.com\/blog\/wp-json\/wp\/v2\/media?parent=6232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quicksetupguide.com\/blog\/wp-json\/wp\/v2\/categories?post=6232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quicksetupguide.com\/blog\/wp-json\/wp\/v2\/tags?post=6232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}