pennywhistle

Yes! Many thanks! So one last small thing: The space below “Enter Your Email Address” should be 0 px. I thought I could set this, based on the Chrome developer tool, to this:

.constantcontactwidget_form .constantcontactwidget_form entry p, .constantcontactwidget_form .constantcontactwidget_form summary p  {
    margin: 0px;
}

But that didn’t work.

Thank you for the swift reply. That worked! Just one thing, though. I have a feeling that the styling of this form is interfering with the search box on this page https://stage.sverdlawfirm.com/sample-page/, knocking the magnifying glass to the next line. (This is what that search box is supposed to look like: https://themeforest.net/item/the-practice-lawyer-wordpress-theme/full_screen_preview/7631488.)

I tried fixing it by prefacing all the CSS related to this plugin with .constantcontactwidget_form, but it didn’t work. Here’s the CSS:

.constantcontactwidget_form {
padding: 20px;
background: #ebebeb;
}

.constantcontactwidget_form .input[type="reset"], input[type="submit"], input[type="button"], button {
    border: none;
    color: #FFFFFF;
    margin-left: 10px;
    padding: 0;
    height: 32px;
    width: 80px;
    line-height: 32px;
    text-align: left;
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-align: center;
    background: url(https://stage.sverdlawfirm.com/wp-content/uploads/2015/06/btn_arrow_blue2.png) right 0 no-repeat;
    background-image: url(https://stage.sverdlawfirm.com/wp-content/uploads/2015/06/btn_arrow_blue2.png);
    background-position-x: 100%;
    background-position-y: 0px;
    background-size: initial;
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
}

.constantcontactwidget_form input[type="text"], input[type="password"], input[type="email"], select {
    height: 30px;
    line-height: 20px;
    width: 180px;
    height: 22px;
    margin: 0px;
}

.constantcontactwidget_form .entry p, .summary p {
    margin: 0px;
}

.constantcontactwidget_form input::-webkit-input-placeholder {
color: transparent;
}
.constantcontactwidget_form input:-moz-placeholder {
color: transparent;
}
.constantcontactwidget_form input::-moz-placeholder {
color: transparent;
}
.constantcontactwidget_form input:-ms-input-placeholder {
color: transparent;
}

Can you be more specific about how you edit the plugin file itself to change the placeholder text? I assume you mean the constanctcontactwidget.php file, but I’m not sure what to change exactly. Thanks.

Thanks for the additional guidance. Is that a matter of adding the following to the child theme, leaving the .widget-area . widget h3 untouched?

@media (min-width: 600px) {
        .widget-area .widget h3 {
	margin-left: -35px;
	}

       .widget a {
       margin-left: -35px;
	}
}

Thanks so much, Chris! I don’t remember why I inserted the following code into my child theme, but after removing it, the problem is fixed. And thanks, too, for the heads up about the favicon.

/* =Media queries
-------------------------------------------------------------- */

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
  .author-avatar {
    float: left;
    margin-top: 8px;
    margin-top: 0.571428571rem;
  }

One last problem: Any idea why the widgets on the blog page aren’t aligning within the mobile device window? (They’re cut off while everything else resizes.)

I tried setting the margin-top to 0, but it didn’t fix the problem: the responsive menu doesn’t expand and the “logo” doesn’t resize. Someone else who is trying to help me out said the following, but I’m not sure how to make the fix:

Your menu is wrapped in this div:

<div class="menu-menu-1-container">

The Twenty Twelve theme’s menu is wrapped in this div:

<div class="nav-menu">

The Jquery for the collapsible menu should be looking for the nav-menu class.

I’m not sure what you mean. I didn’t intentionally, of course. Can you tell me how to fix it? Also, why isn’t the header “susan chi” resizing?

With the help of a friend, I fixed the menu so that it now collapses by changing “block” to “none” in the following code

.main-navigation ul.nav-menu,  .main-navigation div.nav-menu > ul {
display:  block;
text-align:  center;
width:  100%;
}

Unfortunately the menu still doesn’t work, and the nothing is resizing.

Oh shoot. I just saw this response. I ended up just redoing the pages since it is a simple site. However, I still see major problems on Firefox. The site looks as it should in Chrome and Safari, but is a mess in Firefox. Can anyone help me with this?

Fantastic. Thanks so much. All set here.

Thanks. Adding that line worked, though I could have sworn I tried that before. As for the errors you point out (thanks), do I need to open a new thread to ask more questions on how to fix those? I don’t understand the validator report and would like to clean up the code to avoid issues later….

Thanks again.

Thanks, Lemu. I tried adding that code, but still doesn’t work.

Hi,

Thanks for the help, but I don’t understand how to translate this to my child theme. I found the code in the parent theme, transferred it to my child theme and defined the font I’d like the menu to stay in, but still no fix.

/* =Media queries
————————————————————– */

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
.author-avatar {
float: left;
margin-top: 8px;
margin-top: 0.571428571rem;
}

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
font-family: ‘Imprima’, sans-serif;
color: #0099CC;
font-size:16px;
}

.main-navigation li a {
color: #000000;
}

Sorry, just realized I posted this under the wrong topic.

I intentionally didn’t import the parent theme’s styles because I wanted a more stripped down site.

I figured out the alignment problem. Enter this code and adjust accordingly to fix alignement issues.

#content {
position:relative;
top:-114px;
left:150px;
}

To remove the bullets, I did this:

.menu {list-style:none;}