CSS Problem

This topic has 19 replies, 3 voices, and was last updated 8 years by Radu.

Author
November 6, 2015 at 15:43 #85947

wilfriedMarseille
Participant

Hello
I would like put button at the right of the input like this picture for my footer, newletter. than you can see at the bottom of my page. http://www.zikrea.com.

I can’t moov my button “Je m’abonne” at up or down. If you got a css code to move it it will be super.
Thanks you

If you love Ableton check my blog :
www.zikrea.com

Attachments:
You must be logged in to view attached files.

November 8, 2015 at 02:40 #86223

Laura
Moderator

Hello, can you send a jpg or png file instead? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

November 8, 2015 at 02:50 #86231

wilfriedMarseille
Participant

hello
You can check a jpg here.
and i would like make the same for my newsletter. You can see in he footer of my website http://www.zikrea.com
Thanks you 🙂

If you love Ableton check my blog :
www.zikrea.com

Attachments:
You must be logged in to view attached files.

November 9, 2015 at 06:36 #86324

Laura
Moderator

Hello, you can create that with the plugin Mailchimp for WP or another newsletter plugin:)

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

November 9, 2015 at 09:40 #86334

wilfriedMarseille
Participant

Yes i use that. But, my button submit. stay at the bottom of the input and i would like put it a the right of the input, like the screenshot. I don’t know the css propriety to move the button.

If you love Ableton check my blog :
www.zikrea.com
November 10, 2015 at 03:42 #86533

Laura
Moderator
Hello, try by adding this to style.css of child theme
COPY CODE
```
@media screen and (min-width: 800px) {
.mc4wp-form button, .mc4wp-form input[type=button], .mc4wp-form input[type=submit] {
    cursor: pointer;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    float: right;
    margin-top: -17.5%;
    margin-left: 310px;
    position: absolute;
    height: 38px;
}
}
```
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂
November 13, 2015 at 16:50 #87126

wilfriedMarseille
Participant

O yeah exactly what i need. Thanks you so Much i will never found. Thanks a lot !!!

If you love Ableton check my blog :
www.zikrea.com
November 13, 2015 at 17:02 #87130

wilfriedMarseille
Participant
Ah Sorry, i got again a problem …
When i click my button it move at the top.
I try to copy/past with :active But is not working … Can you help me again please ?
COPY CODE
```
@media screen and (min-width: 800px) {
.mc4wp-form button:active, .mc4wp-form input[type=button]:active, .mc4wp-form input[type=submit]:active {
    cursor: pointer;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    float: right;
    margin-top: -18%;
    margin-left: 250px;
    position: absolute;
    height: 38px;
}
}
```
If you love Ableton check my blog :
www.zikrea.com
November 15, 2015 at 22:39 #87415

Laura
Moderator

Hello, try using :focus 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂
November 17, 2015 at 12:19 #87666

wilfriedMarseille
Participant
Hello

So i try :focus but no is changing.
You can check my coe here
COPY CODE
```
/*Positionnement boutton s'abboner*/
@media screen and (min-width: 800px) {
.mc4wp-form button, .mc4wp-form input[type=button], .mc4wp-form input[type=submit] {
    cursor: pointer;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    float: right;
    margin-top: -18%;
    margin-left: 250px;
    position: absolute;
    height: 38px;
}
}
@media screen and (min-width: 800px) {
.mc4wp-form button, .mc4wp-form input[type=button], .mc4wp-form input[type=submit]:focus{
    cursor: pointer;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    float: right;
    margin-top: -18%;
    margin-left: 250px;
    position: absolute;
    height: 38px;
}
}
```
If you love Ableton check my blog :
www.zikrea.com
November 17, 2015 at 16:53 #87724

wilfriedMarseille
Participant
Sooo …. a lot of probleme for this Button (Newsletter in the footer)….
I explain you. I try to put one line with submit button (je m’abonne ) With the input (where the user put his email). And I try to put the Label ( Recevez nos meilleurs news ) with the same size of my input email more the button at the right of the input.

So i get some problems ..
The submit button can’t go above of the email input. And the problem is than the black border of the input email go on the submit button. And is not nice …. So How can I put the submit button just one more pixel ?

Second Problem : Is the same than before with the Focus.

Third Problem : Responsive Design. I try to understand it. But i think than i need a example.
With a very big Screen the position are Ok. But on my MacBookProScreen the button is not in a good position. If you can give me an example to get the same position with a MacBookPro than a bigScreen.

Is My Code :
COPY CODE
```
/*****************   NEWS LETTERS   ******************/
/*LabelMailChimp Recevez nos meilleurs ....*/
.mailchimplab{
    font-size: 23.6px;
    max-width: 3000px;
}
/*Bouton s'abonner*/
.abonnement {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  position: relative;
  cursor: pointer;
  padding: 0 25px 0 20px;
  font: normal 21.3px/2.4 "Open Sans", Helvetica, sans-serif; 
  color: #407F7F;
  text-transform: uppercase;
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #0D4D4D;
  -webkit-box-shadow: 0 5px 0 0 #003333 ;
  /*box-shadow: 0 5px 0 0 #003333 ;*/
  text-shadow: 0 1px 1px rgba(87,151,180,0.36) ;
  -webkit-transition: top 50ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: top 50ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: top 50ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: top 50ms cubic-bezier(0.42, 0, 0.58, 1);
      margin: 0 auto;
      text-align: center;
    border: solid 2px #0D4D4D !important;
    border-top-right-radius : 10px;
    border-bottom-right-radius : 10px;
}
.abonnement:hover {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}
.abonnement:active {
  top: 2px;
  -webkit-box-shadow: 0 3px 0 0 #003333 ;
  box-shadow: 0 3px 0 0 #003333 ;
  -webkit-transform-origin: 50% 100% 0;
  transform-origin: 50% 100% 0;
  color:#669999 ;
}
/*Positionnement et taille du boutton s'abboner*/
@media screen and (min-width: 800px) {
.mc4wp-form button, .mc4wp-form input[type=button], .mc4wp-form input[type=submit] {
    cursor: pointer;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    float: right;
    margin-top: -18%;
    margin-left: 250px;
    position: absolute;
    height: 41px !important;
}

@media screen and (min-width: 1280px){
  .mc4wp-form button, .mc4wp-form input[type=button], .mc4wp-form input[type=submit]{
    margin-top: -18%;
  }

}

}
@media screen and (min-width: 800px) {
.mc4wp-form button, .mc4wp-form input[type=button], .mc4wp-form input[type=submit]:focus{
    cursor: pointer;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    float: right;
    margin-top: -18%;
    margin-left: 250px;
    position: absolute;
}
}
```
Thanks you i’m on this probleme since 12 o clock …

If you love Ableton check my blog :
www.zikrea.com
November 17, 2015 at 17:00 #87726

wilfriedMarseille
Participant

Wait i’m founding a solution. I think than i need to sleep lol.
But i get alway the problem with the focus

If you love Ableton check my blog :
www.zikrea.com

November 17, 2015 at 17:11 #87727

wilfriedMarseille
Participant

OOO Sorry But I can’t do it … If is easy for you I need your help, but if is so long, don’t care with the time i will found solution maybe about 200 hours lol.
So With the Responsive Design I make BullShit. I think than is good but when i change screen and is not Good …

After i don’t found how put the Input Label on one line.

And I always get the focus problem on the click on the boutton s’abbonner.

Thanks you 🙂

If you love Ableton check my blog :
www.zikrea.com

November 18, 2015 at 20:18 #87980

Laura
Moderator

Hello, i see… hmm i could try to do some adjustments and see if it works for you, can you share admin credentials? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

November 19, 2015 at 02:33 #88061

wilfriedMarseille
Participant

This reply has been set as private.

November 20, 2015 at 23:05 #88374

Laura
Moderator

Hello, trying to edit your code but i am a bit confused on what do you exactly want, could you explain a bit more?
The more i understand the faster we can solve this 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

November 20, 2015 at 23:43 #88387

wilfriedMarseille
Participant

On the footer than we see like the image for all computer screen.
And i got a bug too ( when we click on the button, “je m’abonne” the button moove).
And after i will do the responsive. Just if you can let me some mediaQuerise to know different size than i need to customm with css code. Because i would like see 3 big line fullwidth for Label, Input and Button.
Sorry for my english.. You understand me ?

If you love Ableton check my blog :
www.zikrea.com

Attachments:
You must be logged in to view attached files.

November 22, 2015 at 23:45 #88561

Laura
Moderator

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

November 24, 2015 at 02:40 #88712

wilfriedMarseille
Participant

i write a new ticket but i don’t know how assign the ticket to a higher support

If you love Ableton check my blog :
www.zikrea.com
November 24, 2015 at 16:28 #88781

Radu
Moderator
Hi,

I see that you have do some custom development, this is not a kleo issue, this issue is caused by your wrong modifications.

I suggest you to not use in future margin/paddings etc in percents % because depends the browser width height.
COPY CODE
```
@media screen and (min-width: 800px) {
.mc4wp-form button, .mc4wp-form input[type=button], .mc4wp-form input[type=submit] {
    cursor: pointer;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    top: 90px;
    position: absolute;
    height: 43px !important;
    right: 0;
}
```
Try to replace .mc4wp-form button, .mc4wp-form input[type=button], .mc4wp-form input[type=submit] proprietes with the above, now you will see the input is to small that’s because col-sm-3 in other words is not enough space for that input and button, i suggest you to use 3 columns or 2 on footer instead of four.

Cheers

RAdu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
Author

Posts