How to center widget horizontally only on main page

  • Resolved michaellanfield

    (@michaellanfield)


    9 years ago

    On my page
    https://www.michaellanfield.com

    as you see I have an email subscribe newsletter on the page and I would lie to get it in the center of that line and have the subscribe button on the right side on the same line of the email. Currently it is on the left and on 3 lines. I would like to get it to 2 lines in the center. How to do this only for the home page and not to alter the Newsletter widget for other pages right sidebar? Also, how to add a border around the widget to make this widget stand out?

    Thank you.

Viewing 2 replies - 1 through 2 (of 2 total)

  • I noticed you added margin-left: 365px; as inline CSS to try to center the widget. While it appears centered on a desktop, you’ll notice it appears more and more off-center when the browser window is narrowed.

    So first step, delete that.

    Then, install a plugin like Simple Custom CSS to handle further CSS changes. This is a bit more convenient than adding inline CSS directly to the HTML.

    Then, add the following CSS:

    .widget_newsletterwidget {
	border: 3px solid black;
	margin-left: auto;
	margin-right: auto;
	max-width: 229px;
	padding: 0 20px;
}

.newsletter-widget p {
	display: inline;
}

.newsletter-widget input.newsletter-email {
    width: 118px;
    float: left;
    margin-right: 6px;
}

.newsletter-widget .newsletter-submit {
	margin-top: -1px;
}
    Thread Starter michaellanfield

    (@michaellanfield)

    WOW! Thank you friend. Worked like a charm.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to center widget horizontally only on main page’ is closed to new replies.