How to Change CTA Call to action Button (s) Position depending on screen size and orientation

Hello

I have being trying to find a way to change the call to action button position. I have tree.

  1. I would like them to be no more then 2px over the slider pictures. So almost looking like tabs.
    Actually I need it to be on the mobile portrait orientation 2px and on the landscape around 10px and on bigger screens like pc and large tablets I need to move it a little down but not sure yet how much, just a little.
  2. I need that the buttons always stay at the same position from slide to slide,
    For a time they were moving up and down depending on how much room the text above took. At this moment that is not happening because I modify a little the text but I would like to be able to address that now, if possible too, so if I make future text changes, don’t have this issue again.

Thanks in advance.

Temporary website project here https://websicl.000webhostapp.com/

Visual explanation, don’t mind size of the buttons just location:

Also in Services. Servicios I have been unable to figure out how each one can be turned in to a link that takes us to another page.
one link for eventos , another for Delivery, another for Restaurante

Hi,

You can move the slide buttons down with this Custom CSS:

.text-slider {
    margin-bottom: 80px !important;
}

you can change the space between text and buttons based on screen-sizes with this Custom CSS:

@media only screen and (max-width: 768px) {
.text-slider {
    margin-bottom: 80px !important;
}
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba

Thank you.
I really like the new placement of the buttons on mobile and actually I like it on PC too BUT…
It pushes the slide text up :frowning:
On mobile is not that terrible, but still I would like the text to be a little bit lower, maybe I like it n mobile, not sure yet but on PC it almost touches the Logo now so there I definitely need to lower the slider text,not sure how much maybe 10px .
How can I Fix that with out screwing up the rest?

Hi,

You can also move the text with this Custom CSS:

.slide-inner {
    top: 60% !important;
}

@media only screen and (max-width: 768px) {
.slide-inner {
    top: 50% !important;
}
}

Please modify the % values of the top spacing of the slider text on desktop and mobile separately to your likings and let me know how it works.

Kind Regards,
Csaba

Thank you very much

That help with the position of the slide text. In that regards it works great.

But there is something very perplexing happening only on PC

The beautiful slow sliding of the text from right to left get messed up.
The movement with this CSS on PC gets super short, is so short that almost looks like the text is just changing on the same spot.

This does not happen on my phone but it does happen on my tablet and pc
Also the sliding pictures load or change slower and the fading from one to another get messed up to.

I pasted the css code on my child theme and on a separate css where I have all the slider css modifications

If I remove the CSS modification. everything goes back to normal.
Any ideas?
I discovered that on the tablet it happens when I see the site with the browser option, “see as desktop” on but it does not happen with that turned off

ok it seems the problem was caused by a missing “braket” } <–what is the name for that? Not sure. This are all my CSS changes for the sliding area:

.roll-button {
margin-left: 7px;

padding: 8px 16px;
}

.text-slider {
margin-bottom: 80px !important;
} /* affects CTA buttons placement */

@media only screen and (max-width: 768px) and (orientation:portrait) {
.text-slider {
margin-bottom: 45px !important;
} } /* affects CTA buttons placement mobile */

.text-slider .maintitle, .text-slider .subtitle{
color:#ffffff;
text-shadow: 2px 2px #000;
}

.slide-inner {
top: 60% !important;
}

@media only screen and (max-width: 768px) {
.slide-inner {
top: 60% !important;
}

I added for the mobile position of the button (orientation:portrait) because when I moved the text down the button moved down a bit but on portrait it was to much that ended up with the lower part hidden. Is it well implemented?

It seems to be working ok , and now the text and images slide the way they should.
Can you take a look if all is well written please. any missing brackets? thank you

Hi,

You only have a missing bracket at the end of your Custom CSS, if you add something below:

.slide-inner {
    top: 60% !important;
}

will be in @media only screen and (max-width: 768px), so please add an other bracket under it, so you’ll close the media screen too.

Kind Regards,
Csaba

mmmm
not sure if understand, like this?

.roll-button {
margin-left: 7px;

padding: 8px 16px;
}

.text-slider {
margin-bottom: 80px !important;
} /* affects CTA buttons placement */

@media only screen and (max-width: 768px) and (orientation:portrait) {
.text-slider {
margin-bottom: 45px !important;
} } /* affects CTA buttons placement mobile */

.text-slider .maintitle, .text-slider .subtitle{
color:#ffffff;
text-shadow: 2px 2px #000;
}

.slide-inner {
top: 60% !important;
} /* affects slider text position */

@media only screen and (max-width: 768px) {
.slide-inner {
top: 60% !important;
} } <–That Bracket? /* affects slider text position on mobile */

Hi,

Yes, that’s it, I meant to add the bracket there, where you have @media you must have 2 beckets at the end, one close the class and the second closes the media screen.

Kind Regards,
Csaba

Thank you very much you were very helpful :star_struck:

Hi,

Great! You’re most welcome! If you need help with anything else, please open a new topic.

Have a nice day!

Kind Regards,
Csaba