Question

我需要帮助使Header下的Email Opt-In栏在移动设备上看起来与在桌面上一样。 Here is the website.

我不熟悉任何编码，所以任何帮助都将不胜感激！：）

以下是我目前使用的CSS：

/* this would be the color and size of the main bar */
#nsu-head {
    background-color: #ffcfde;
    padding: 34px;
}

/* basic text color and placement */
#nsu-head p {
    float: left;
    color: #000000;
    margin-top: -5px;
    padding-right: 10px;
}

/* placement of the invitation text */
#nsu-head p.form_label {
    text-transform: uppercase;
    padding-left: 50px;
    padding-right: 30px;
    margin-top: 0;
}

#nsu-form-1 label {
    display: none;
}

/* hides the input field labels */
/* input button styling going for a circle with drop shadow */
input#nsu-submit-1 {
/* remove if you don't care about IE8 */
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}

/* controls the background color during inactive and hover states */
input#nsu-submit-1.nsu-submit {
    background: no-repeat darkMagenta;
    border: 1px solid darkMagenta;
}

input#nsu-submit-1.nsu-submit:hover {
    background: no-repeat black;
    border: 1px solid black;
}

/* placement of post sign up text if no thank-you page */
p#nsu-signed-up-1 {
    float: right;
    font-size: .9rem;
    color: #DDD;
    padding-right: 0;
    margin-top: -18px;
    width: 45%;
}

Answer 1

你的代码非常混乱，但尝试这样做：

1）寻找Aweber的代码。在您的源代码中看起来像这样

<div class="nsu-form" id="nsu-head">
<p class="form_label">Get <span style="font-style:italic;">Free</span> &nbsp;Tips to Be a Healthier Mama!</p>
<!-- Form by Newsletter Sign-Up v2.0.3 - http://wordpress.org/plugins/newsletter-sign-up/ -->
<form class="nsu-form" id="nsu-form-0" action="http://www.aweber.com/scripts/addlead.pl" method="post"><p><label for="nsu-name-0"> </label><input class="nsu-field" id="nsu-name-0" type="text" name="name" placeholder="Name"  /></p><p><label for="nsu-email-0"> </label><input class="nsu-field" id="nsu-email-0" type="email" name="email" placeholder="Email" required /></p><textarea name="nsu_robocop" style="display: none;"></textarea><p><input type="submit" id="nsu-submit-0" class="nsu-submit" name="nsu_submit" value="Get it!" /></p></form>
<!-- / Newsletter Sign-Up -->
</div>

你的Aweber代码可能会有所不同，但你会明白这一点。现在，如果您的插件允许，请尝试移动此部分：

<p class="form_label">Get <span style="font-style:italic;">Free</span> &nbsp;Tips to Be a Healthier Mama!</p>

在<div class="nsu-form" id="nsu-head">之外（因此，该段落必须在此nsu表格行之前）

完成所有操作后，请务必删除代码中当前的所有内容并将其添加到header-left中，如下所示：

<div id="header-left-section">
YOUR CODE HERE
</div><!-- #header-left-section -->

这将使您的主题按预期工作。那就是：你的表格在左边，全宽在手机上，你的导航在右边，全宽在手机上。

但是，如果您还想在任何屏幕中将其设置为全宽，请将其添加到CSS：

#header-left-section, #header-right-section{float:none !important; clear:both; display:block}

这应该可以解决您遇到的每一个问题

用于制作电子邮件选择适合移动设备的CSS

1 个答案: