Hi guys,
I have two issues here:
1) I have three custom header widgets (date widget; clock widget; stock quote widget), on a line above each other. When I reduce the screen size, the headers start to overlap each other. I need them to just disappear completely when the pixel width of the browser/viewport makes the elements overlap. Whats the CSS?
2) I have a slider with captions and buttons. Again, it all looks great in full-screen mode, but when the window reaches a certain pixel limit, the buttons don’t fit in the slider and the caption overlaps itself. I need both captions and buttons to disappear when the critical pixel width is reached. Whats the CSS?
I have provided the page and login info in private content.
Thanks a million, you guys are the best!
Anyone who has an idea how to fix this?
No one?
I could really use some input here :-/
Hi,
Sorry for the late reply!
1- Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 767px) {
#header .widget {
display: none;
}}
2-
@media only screen and (max-width: 480px) {
.slideshow_caption {
display: none;
}}
Best regards,
Yigit
Thanks Yigit – you’re a lifesaver as usual!
However, I still need the buttons of the slider to be adjusted.
Preferably, I would like them to be positioned a bit “higher” (maybe 10-20px higher than current position). Finally, I need them to not show on viewports below 1000px.
Can you help? This will be the last request I have :-)
Hi!
I replied you here – https://kriesi.at/support/topic/size-of-caption-buttons-in-fullwidth-easy-slider/ regarding moving buttons higher. And it seems like you have already figured out a way to remove the buttons on smaller screens.
I am marking this thread as resolved. Let us continue on the other one :)
Regards,
Yigit