Minamaze Content Areas 1, 2, 3

The problem is that the CSS rule for those elements (class one_third) have a width of 33.3%. That by itself would be OK, since 3×33.3% = 99.9%. However, the first and second elements also have a right margin of 2.6%, so the total amount of space requested is 99.9% + 5.2% = 105.1%. That’s why it’s wrapping, because the total width is more than 100%.

So, you can either reduce the width of the elements, reduce the spacing between them, or some combination of the two.

I see that you have JetPack installed, so add this rule to the Custom CSS option (Appearance > Edit CSS):

.one_third {
   width: 33.3%;
   margin-right: 2.6%;
}

The values listed for width and margin-right are what is currently in effect. Change the values of one or both to something lower. For example, you can try setting the width to 31%. That will give you a total width of 98.2%, which should be good.

To return to this issue, the above solution worked initially. Just recently, I noticed that the stylesheet for this Theme was randomly deleted and it automatically changed my website to a different theme. I had to delete Minimaze and re-install it. I still have the issue where the 3rd content area is on the 2nd row. This time though, I cannot find the recommended change to the rule that was posted above by CrouchingBruin. I went through every line of code in the CSS Editor and was unable to find the location where I can change the widths. Any insight as to why?

https://theozagroup.com/

Are you adding the CSS through Jetpack’s Custom CSS option? Don’t go into Appearance → Editor, because your changes will be lost if the theme has to be updated or re-installed. That’s probably why you don’t see it anymore. You should go to Appearance → Edit CSS. If you don’t see an Edit CSS menu item under Appearance, go into your Jetpack settings (Jetpack → Settings) and activate the Custom CSS option.

Once Jetpack’s custom CSS option is enabled, go to Appearance → Edit CSS and add the following rule to the editor:

.one_third {
   width: 31.6%;
}

Thank You!

One more thing that I didn’t originally think about. On mobile screen widths, you want the three containers to stack on top of each other or else they will look squished. Add this to the very end of the custom CSS:

@media only screen and (max-width: 568px) {
   .one_third {
      width: 100%;
      margin-right: 0;
      float: none;
   }
}