70ph

Also works, thanks again!

I was thinking about giving youtube a try, because I had to compress the video in way that makes it very noisy to achieve the loading speed. And youtube might be able to switch between several levels of quality depending on the user’s bandwidth.

Moreover, I have some more issues that I can’t get rid of.
-On my mobile phone the “join/submit” button is positioned just a few pixels lower than the email input field.

-Also on my mobile phone (Android) the active word I’m typing is underlined wich somehow ruins the “floating” character of the layout in my case. I’ve tried to suppress it. WordPress/Android wasn’t too impressed. No effect.

-I also tried to adjust the font-size and letter-spacing in the footer/copyright section relative to the the viewport width. I works in most cases. Only if the window is very wide, a line break occurs. I tried to maximize the footer section to width=100vw without success. I tried the same with the “subscribe-response”-texts. No effect at all.

-Is there way to reduce the distance/space between the headline/title and the e-mail-field+button-line beneath? Is there also a way to adjust the vertical position of both lines?

.body {
    max-width: 100vw;
	width: 100vw;
    margin: 0
	overflow: hidden;
	
	font-size: calc(5px + .8vw);
	letter-spacing: 0.1vw;
	
}
.background-wrapper {
    max-width: 100%;
	width: 100%;
    margin: 0
	overflow: hidden;
}
.inner-wrap {
    max-width: 100%;
	width: 100%;
    margin: 0;
	padding-right:0vw;
	padding-left:0vw;
	overflow: hidden;
}
.inner-content {
   	max-width: 100%;
	width: 100%;
    margin: 0;
	overflow: hidden;
}
.text-logo-wrapper {
	max-width: 100%;
    
    
	overflow: hidden;
}
.text-logo {
	margin: 0.6vw;
	min-width: 0%;
    max-width: 100%;
	font-size: 2vw;
	letter-spacing: 1.75vw;
	overflow: hidden;
	text-align: center;
}

.inner-content form{
	text-align: center;
}
.cmp-subscribe input[type="submit"]{
	width: 25vw;
	margin-left: 0vw;

	margin-right: -14vw;
}
.cmp-subscribe input[type="email"]{
	margin-left: -10vw;
	width: 75vw;
}

.subscribe-response {
	text-align: center;
	font-size: calc(5px + .8vw);
		letter-spacing: 0.1vw;
}
.subscribe-overlay{
	text-align: center;
}
.copyright {
		font-size: calc(5px + .8vw);
		letter-spacing: 0.1vw;
		
	}

.footer{
	width: 100%;
	max-width: 100%;
}

input {
	display: inline;
    background: transparent!important;
	background-blend-mode: transparent!important;
}
input[type="email"] {
    font-size: 2vw;
    letter-spacing: 3vw;
	text-indent:0vw;
	font-weight: 500;
	
}
input[type="submit"] {
    font-size: 2vw;
    letter-spacing: 4.6vw;
	padding-right:0vw;
	margin-right:0vw;
	text-transform: lowercase;
	font-style: italic;
	text-align: right;
	font-weight: 500;
	color: hsl( 0, 0%, 100%);
}

input {
    border: transparent!important;
  border-bottom: none!important;
  box-shadow: none!important;
}

@media only screen and (max-width : 520px) {
    input[type="email"],
    input[type="submit"],
    .cmp-subscribe input[type="email"] {display:inline;}
/*
	.copyright {
		font-size: 2vw;
	}
*/
}

.input-icon::before, input[type="email"], input[type="text"] {
    color: hsl( 0, 0%, 100%);

Sorry for all the questions & Good night/morning:)

Chris

• This reply was modified 7 years, 9 months ago by 70ph.

Hi Alex,

I tweaked the Custom CSS a bit more and came to this point so far: goo.gl/Dicxbw
Most of the letter-spacing is dynamic now.

What’s still causing me a headache is the JOIN/Submit button. It should be in the same line as the e-mail input field which works well in most cases.
Only if I switch to my mobile device’s small screen in horizontal view, the JOIN/Submit button is positioned in a separate line under the e-mail input field. It’s an Android phone, but I don’t think that matters here. You can also see the same effect by shrinking a desktop browser.

Do you have any clue why this happens?

There might be some code lines which aren’t really necessary. I just tried out several things. Sorry for the mess. Here we are:

.body {
    max-width: 100vw;
	width: 100vw;
    margin: 0
	overflow: hidden;
}
.background-wrapper {
    max-width: 100%;
	width: 100%;
    margin: 0
	overflow: hidden;
}
.inner-wrap {
    max-width: 100%;
	width: 100%;
    margin: 0;
	padding-right:1vw;
	padding-left:1vw;
	overflow: hidden;
}
.inner-content {
   	max-width: 100%;
	width: 100%;
    margin: 0;
	overflow: hidden;
}
.text-logo-wrapper {
	max-width: 100%;
    
    margin: 0;
	overflow: hidden;
}
.text-logo {
	min-width: 0%;
    max-width: 100%;
	font-size: 2vw;
	letter-spacing: 1.74vw;
	overflow: hidden;
}

.inner-content form{
	text-align: center;
}
.cmp-subscribe input[type="submit"]{
	width: 25vw;
	margin-left: 0vw;

	margin-right: -10vw;
}
.cmp-subscribe input[type="email"]{
	width: 75vw;
}

input {
	display: inline;
    background: transparent!important;
	background-blend-mode: transparent!important;
}
input[type="email"] {
    font-size: 1.5vw;
    letter-spacing: 2vw;
	text-indent:0vw;
}
input[type="submit"] {
    font-size: 1.5vw;
    letter-spacing: 2vw;
}

input {
    border: transparent!important;
}

PS.: It also works smoothly in my Firefox now. Must have been some external issue.

Thanks,
Chris

• This reply was modified 7 years, 9 months ago by 70ph.

Hey Alex,

Thanks for checking my source code.
I just copypasted your code and it still doesn’t work here, which is quite confusing. Which file did you edit?

Did you replace

<form name=”cmp_subscribe_form” method=”post” action=”admin.php?page=cmp-subscribers”>
<?php $cmp_subs_list_table->display(); ?>
</form>

by

<form id=”subscribe-form” method=”post” class=”cmp-subscribe” autocomplete=”off”>

in the cmp-subscribers.php ?

Do I also need to chose some specific options in the plugin’s menu to make it work?

This is what my source code looks like now:

<form id=”subscribe-form” method=”post” class=”cmp-subscribe”>
<input type=”hidden” id=”save_options_field” name=”save_options_field” value=”dc154d72e9″ /><input type=”hidden” name=”_wp_http_referer” value=”/” />

<input type=”email” id=”email-subscribe” name=”email” placeholder=”Your email address” required>

<input type=”submit” id=”submit-subscribe” value=”JOIN”>

<div style=”display: none;”>
<input type=”text” name=”form_honeypot” value=”” tabindex=”-1″ autocomplete=”off”>
</div>

<div id=”subscribe-response”></div>

<div id=”subscribe-overlay”></div>

</form>

Have a nice weekend

Chris

• This reply was modified 7 years, 10 months ago by 70ph.

Hi Alex,

thank you very much for your help! I really appreciate it. And sorry for the late reply.

So, here is the coming soon page so far goo.gl/Dicxbw
Works quite well.

What’s still missing, is the option to keep the e-mail input field transparent all the time. By now, it turns yellow if someone choses a saved e-mail address from the drop down list and then it stays yellow after a valid e-mail address was submitted.

Also, the option to have a “non-breaking” text logo would be great on smaller screens.

Cheers!
Chris

..I think I also found a small bug: The phrase “Please insert valid Email address.” won’t be translated. All other translations work perfectly.

Hope this doesn’t make me sound too whiney. Great plugin!

Hey Alex,

Thank you for your help!

The website is not online, yet. If you could help me out with some lines of CSS code, wouldn’t it be possible for me to adjust the numbers / spacing?

Chris