如何使选择启用响应，以便它保持在较小屏幕上的正确位置 [英] How to make opt-in responsive so it stays in the correct place on smaller screens

问题描述

我在以下网站的标题区域添加了选择加入表单/免费注册： http：// www .clearcreativecoaching.com / 本网站使用Mantra Wordpress主题。

当您最小化浏览器窗口时，您会看到选择加入表单移出不合适的位置。是否有一个代码，我可以使选择加入的形式响应，以便它保持在任何大小的屏幕/窗口的适当位置。

项目中，安装了一个插件来为此网站创建一个移动网站。我不认为它为网站添加了响应式代码，因为它专门在移动设备上创建了一个移动应用查看网站。该插件称为Duda Mobile，并且标题区域在使用此插件的移动网站上完全不同，选择加入甚至不显示。所以我不认为这与我的问题有任何关系。

我需要特定的代码，与标准的计算机/笔记本电脑上看到的标题选择加入，我希望它保持在适当的位置，无论如何大或小的屏幕或浏览器窗口是。这可能吗？

我在两个不同的Mantra和Wordpress论坛搜索了这个答案，没有帮助。

解决方案

更改您的 .wholeoptinform 样式到

  .wholeoptinform {
 width：536px; 
 position：absolute; 
 top：305px; 
 left：50％; 
 margin-left：-268px; 
} 
  

在 .topmenu ，删除

  .topmenu {
 margin-top：-360px; 
} 
  

快速说明：

网站的其余部分基本上位于浏览器窗口中间：

这会让网站的主要部分宽度为1100px，然后将自由空间均匀地分布在它的左右两侧。

另一方面，你告诉你的 .wholeoptinform / p>

放置我，所以在我左边总是有530px，我上方有305px，不管发生什么。因此，无论屏幕有多小或大，它都会锁定到位。

这就是为什么您的表单和网站的其余部分不匹配浏览器窗口缩小。

I added an opt-in form/freebie sign up in the header area on the following site: http://www.clearcreativecoaching.com/ This site is using the Mantra Wordpress theme.

When you minimize your browser window you will see that the opt-in form moves out of place. Is there a code I can put in to make the opt-in form responsive so that it stays in its proper place on any sized screen/window.

Before I got this project, a plugin was installed to create a mobile site for this website. I don't believe it adds "responsive" code to the site because it specifically creates a mobile app looking site on mobile devices. The plugin is called Duda Mobile and the header area is totally different on mobile sites using this plugin, the opt-in doesn't even show. So I don't think that this has anything to do with my problem.

I need specific code that will speak to the header opt-in as it is seen on regular computers/laptops and I want it to stay in its proper place no matter how big or small the screen or browser window is. Is this possible?

I've searched for answers to this in two different Mantra and Wordpress forums with no help yet. Any advice you can give will be greatly appreciated.

解决方案

Change your .wholeoptinform styles to

.wholeoptinform {
  width: 536px;
  position: absolute;
  top: 305px;
  left: 50%;
  margin-left: -268px;
}

On your .topmenu, remove

.topmenu {
  margin-top: -360px;
}

A quick explanation:

The rest of the site is basically made to be centered in the middle of the browser window:

This tells it to make the main part of the site 1100px wide, and then divide the free space evenly to the left and right of it. This is flexible and adapts to any screen wider than 1100px.

You told your .wholeoptinform on the other hand

"place me so there is always 530px to the left of me and 305px above me, no matter what happens." So it is locked firmly in place, no matter how small or big the screen is.

This is why your form and the rest of the site didn't match up when the browser window shrunk.

这篇关于如何使选择启用响应，以便它保持在较小屏幕上的正确位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！