centering bottom widgets in Mog Theme

  • Hello! I’m using Mog Theme on a site that is in the alpha stage right now, and I would like to make sure the bottom widgets remain centered on any monitor size or zoom level. If anyone tell me how to do this, I would appreciate it very much. I have beginner level experience in CSS.

    Here is my site: https://www.therenaissancemind.com/

    Here is the current css from main.css:

    /* Secondary area */
#secondary{
	margin: auto 23%;
	padding: 2em 0;
	border-top: 0px solid #AAA;
}

#search{
	text-align: center;
	float: none;
	width: auto;
	margin-bottom: 1.5em;
}

aside.widget{

	float: left;
	margin: 0 1em 0 0;
	width: 13em;
	padding: 5px;

}
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter ScoutingRediscovered

    (@scoutingrediscovered)

    Hello! After tweaking some CSS setting, I found I could center the element by changing to “margin: 0 auto;”

    However, I still haven’t been able to get the three widgest side-by-side and centered.

    It seems that “float: left;” makes them line up side-by-side but also pushes the element to the left of the page. Changing it to “float: none” makes it center, but doesn’t line the widgets up side-by-side.

    Here is my current CSS from main.css:

    /* Secondary area */
#secondary{
	margin: 0 auto;
	padding: 2em 0;
	border-top: 0px solid #AAA;
}

#search{
	text-align: center;
	float: none;
	width: auto;
	margin-bottom: 1.5em;
}

aside.widget{

	float: none;
	margin: 0 auto;
	width: 13em;
	padding: 5px;

}

    If anyone could help I’d really appreciate it!

    Thread Starter ScoutingRediscovered

    (@scoutingrediscovered)

    Hello! I solved the problem thanks to the help of a user on the CSS Tricks forums . If anyone’s interested (and for future reference), here is my current code:

    /* Secondary area */
#secondary{
    margin: 0px auto;
    padding: 2em 0;
    border-top: 0px rgb(170, 170, 170);
    width: 100%;
    max-width: 720px;
}

#search{
    text-align: center;
    float: none;
    width: auto;
    margin-bottom: 1.5em;
}

aside.widget{

    float: left;
    margin: 0px auto;
    width: 33.33%;
    height: auto;

}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘centering bottom widgets in Mog Theme’ is closed to new replies.