How do I make Div Container 100% width only on homepage of site?

This is more a CSS than a WordPress question, but

There are several ways to do this, but I think this is the easiest. WordPress themes should use the home class on the body tag and the site content area has a class of site-content, so to set the primary content area to full width, use:

.home .site-content {
  width: 100%;
}

You’ll have to hide the sidebars too. If you want to hide all of them:

.sidebar {
  display: none;
}

If you’re using WordPress 4.7+, you can easily add CSS via the Customizer->Additional CSS.

Related Posts:

  1. Is there a CSS parent selector?
  2. How can I vertically center a “div” element for all browsers using CSS?
  3. How do I hide the bullets on my list for the sidebar?
  4. CSS display: inline vs inline-block
  5. How to center HTML5 Videos?
  6. Text border using css (border around text)
  7. Is there an opposite CSS pseudo-class to :hover?
  8. U8Qtu
  9. Center a position:fixed element
  10. How to change the background colour’s opacity in CSS
  11. difference between css height : 100% vs height : auto
  12. Using margin / padding to space span tag from the rest of the p tag
  13. Could the WP script/style loader be used to concatenate and gzip scripts and styles in the front-end?
  14. Style something only on the home page
  15. How do I register/enqueue a custom CSS file?
  16. Why isn’t my theme processing SASS?
  17. PageLines theme: how to change the background color of the main content vs. entire page?
  18. Trying to load a responsive CSS media query using Custom Taxonmy
  19. Changing CSS in Twenty Eleven to change font size of body text
  20. Gutenberg Block Editor Match Admin Styles & Frontend Styles
  21. The correct way to include JavaScript and CSS in my WordPress Themes
  22. Is it possible to change the path of a css file that is registered through wp_enqueue_style()?
  23. Styling Custom Meta Boxes?
  24. Customizing wordpress to match your site theme
  25. Is it better to put CSS in additional CSS or in Child theme styles.css [closed]
  26. Adding HTML to the Header, Screws up in IE7
  27. Efficient way to edit WordPress themes
  28. How To Load Different CSS Style, Based On Language When Using QtranslateX [closed]
  29. Where Do I Find The Astra Default Font Family That All Text Elements Are Inheriting From? [closed]
  30. Getting page output HTML without request (for CriticalCSS, PurgeCSS)
  31. How to organize priority of plugins CSS files?
  32. Responsive Images Warping
  33. Remove margin from CSS gradient color code
  34. Unable to remove space between header and slider section in wordpress website
  35. How do I apply/target CSS to a specific user role or roles?
  36. Why is this jquery / java script code not working in mobile / in devices?
  37. Seperate functions.php for part of site
  38. Internet Explorer ignore my css
  39. How can I remove the ::after CSS selector which is automaticaly appended to the_content()?
  40. Hover colour spreading out beyond submit button
  41. Some Text of website page on Iphone Safari become invisible
  42. Child Theme CSS not showing at all
  43. post_class not working with css
  44. Adding CSS to Blog Posts?
  45. Where do I go to change the position of the style.css?
  46. Using PHP Increment and Conditional Statement to Alternate Loop Background
  47. wp_enqueue_media is not loading styles
  48. Remove a Style Tag from WP Theme
  49. Simple way to add custom class and ids to individual Gutenberg blocks
  50. child theme appears again when I put the header with parent name.
  51. How to Add a Read-only Textbox With Text in it That Has a Button to Copy it?
  52. Namespacing theme CSS
  53. cookie free subdomain and @font-face
  54. How to change the standard navigation menu color when using genesis [closed]
  55. How to add class to an html output element in tinyMCE paragraph drop down menu
  56. Add classes + taxonomy terms to wp_list_pages() output
  57. CSS isn’t rendered on a post but just posted as text [closed]
  58. How would I create the same popup in css and javascript as the one in contact button on the site https://www.sublimotionibiza.com/es/main.html [closed]
  59. Customizing the Post/Page Editor in Classic Editor
  60. How to use css only H2 Tag? Site is considering website title also H2 tag and changing its style as well
  61. How to edit CSS style sheet after migrating from local
  62. WordPress footer always at the bottom of the screen-page
  63. Dequeing Parent Fontawesome Deques Parent Styles
  64. WordPress childtheme not loading any CSS/SCSS
  65. Why can’t blocks be hidden with jQuery?
  66. CSS: Appearance/Customise display different to actual display
  67. Border around menu button [closed]
  68. Correct use of !important
  69. How to change hover link colour for blog post (body) text only
  70. Problems styling a Custom Link in a Menu
  71. Font .woff files loaded don’t correspond to the displayed styles [closed]
  72. Help locating old custom_css in PHP MyAdmin
  73. I would like to achieve a two column checkout page
  74. CSS transition from 0px width to 100% width
  75. Custom CSS rule overridden in theme
  76. Twenty Fourteen: Shrinking header while scrolling down
  77. Style sidebar for a custom page template exclusively
  78. CSS ?ver=4.7.3 not found
  79. Custom CSS rules only apply to home page
  80. Sticky Button not working WP. But does it JS Fiddle
  81. How to enqueue google fonts if we use directly in style.css
  82. Trouble with adding preloader to my home page index.html and index.js
  83. How to change in css with a custom theme?
  84. How to change menu hover color to white on my theme? [closed]
  85. How to make CSS load live based on options clicked in the theme customizer?
  86. How can a left and right margin be added to the admin bar without access to “…wp-includes/admin-bar.php”?
  87. Inserting a DIV Block Into a Listing of Excerpts?
  88. WordPress Custom Superfish CSS Problem [closed]
  89. Browser stacks different versions of style.css
  90. Do you use css reset in your child theme [closed]
  91. Is it possible to make invisible a div only on certain pages using CSS?
  92. What CSS selectors to know for WordPress? [closed]
  93. MY CSS FILE IS MISBEHAVING. IS NOT WORKING WELL ON MY WP SITE [closed]
  94. Can I upload my HTML/CSS/Javascript game onto a WordPress page?
  95. How to add css to wp_head depending on the user role?
  96. How to avoid problems caused by new block-library default CSS rules (wp 6.1.1)
  97. Grid problem on privew mode
  98. Disabling double vertical scrollbar and horizontal scrolling?
  99. Customize margin between paragraphs using the Gutenberg Style editor
  100. How to remove automatically added custom style tag?

Leave a Comment