This reply has been marked as private.
Hello,
Use this code for make align on mobile:
@media (max-width:568px){
.page-template-start-php #content .unit_wrap .unit_content .unit_prevnext {
width:100% !important;
}
}
Refer:
https://prnt.sc/sybbk5
Thanks,
I added the code both in Footer as in the style.css file but it doesn't stick. What am I doing wrong? Could you have another look, please?
Gijs
Hello,
Once clear cache and try to open page on incognito window,
Thanks,
I tried everything. Didn't work. So the code works great. But I just DO NOT want the code active on mobile devices. Is there a way to add something like this?
@media(min-width:991px) What's the max-with for mobile devices? Or min-width for non-mobile devices?
I tried to add that suggested code but it didn't work anymore on bigger devices.
hi,
you can check it from here:
https://prnt.sc/t00rey
can you please that on which devices you want to add it and on which don't want to add.
as jackson is not here so i am interrupting between the conversation sorry for that.
in the above jackson has send the code which is for mobile. if you remove that one then it will apply on all devices
I want the code to work on all devices except phones and iPads held vertically (in upright position). Because the button goes through other content on those smaller devices.
Hello,
Okay, The code working well but only the issue is devices okay,?
Then you can use this code according to you,
You can use media query according to your need,
Mobile max-width is 500,
Thanks,
I want this code to work on devices bigger than phone and tablet vertical. So only on desktop, laptop, tablet horizontla. But even using @media (min-width: 500px) doesn't work. I added the code both to Footer and style.css (childtheme)
This was my latest try. what's wrong?
@media (min-width: 500px){.page-template-start-php #content .unit_wrap .unit_content .unit_prevnext {width:100% !important;}}
Hello,
Please try to use @media(min-width:880px)
{
.page-template-start-php #content .unit_wrap .unit_content .unit_prevnext {
width:100% !important;
}
}
Thanks,
Dear Jackson,
Didn't work. But let me explain. So it all started with the TRY AGAIN button from the quiz. I wanted it to appear without moving the yellow 'previous/next unit/quiz'-bar. So I was given code for that. It didn't work in style.css, but it did work in the footer. Now I want code added so that this new code does not work on small devices. Makes it overlay other css. SO concluding: I now have this code in my footer that works for the first bit, but not the second bit. What can we do?
This code works:
<style>
.page-template-start-php #content .unit_wrap .unit_content form.quiz_retake_form.start_quiz input{
top:-75px !important;
position:relative !important;
right:20px !important;
border-radius:20px !important;
}
.page-template-start-php .unit_content form.quiz_retake_form.start_quiz {
padding-top:0px !important;
display:contents !important;
}
</style>
This bit doesn't (not in style.css, or in footer):
<style>
@media(min-width:880px)
{
.page-template-start-php #content .unit_wrap .unit_content .unit_prevnext {
width:100% !important;
}
}
</style>
Hello,
This bit not added anywhere , I was saying to you, Tpo add this bit and check working or not,
Thanks,
.
