I am using a website template on Cargo Collective. On the Home page, there is a grid of images with text that only appears on hover. In Mobile view, the text does not appear. I understand hover doesn't work consistently on mobile devices. Is there a way to set this text to appear when the page loads on mobile?
Alternatively, how would I remove the hover functionality and have the text always visible?
Here are the two spots where hover appears in the CSS:
[data-predefined-style="true"] bodycopy a:hover {
}
bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
border-bottom: 0;
padding-bottom: 0;
}
/**
* Thumbnail Hover
*/
.thumbnails .thumbnail > a {
position: relative;
}
.thumbnails .thumbnail .title {
background: rgba(0, 0, 0, 0.4);
padding: 0.5rem 1.2rem 0.7rem 1.2rem;
margin: 2.4rem;
color: rgba(255, 255, 255, 1);
align-content: center;
display: flex;
position: absolute;
left: 0;
top: 0;
z-index: 9;
opacity: 0;
}
.thumbnails .title span {
margin: auto;
display: inline-block;
}
.thumbnails .thumbnail:hover .title {
opacity: 1;
}
body.mobile .thumbnails .thumbnail:hover .title {
opacity: 0;
}
Out if this part we can make something up.
body.mobile .thumbnails .thumbnail:hover .title {
opacity: 0;
}
What if we removed the .thumnails:hover and changed the opacity to 1? it might do the trick.
body.mobile .thumbnails .title {
opacity: 1;
}
I hope this works but I have no Idea about Cargo Collective. Just using css knowledge.
I recommend to you to learn some css basics. This will help you to solve problem like this in the future.
Here's a small example showing how you could hide and display text depending on the width of the viewport using media queries. A similar method can be applied to your problem by only setting the :hover properties when the screen has a given minimum width.
Also note, that that device-width has been depreciated and removed from Web standards. So be careful when choosing your media query.
/* General styles */
p {
transition: opacity 0.3s;
}
/* Small styles */
.large {
opacity: 0;
}
.small {
opacity: 1;
}
/* Large styles */
#media only screen and (min-width: 640px) {
.large {
opacity: 1;
}
.small {
opacity: 0;
}
}
<p class="large">I'm visible when the screen is large!</p>
<p class="small">I'm visible when the screen is small!</p>
I should also mention that this is by no means a perfect solution. If you want to be more accurate, I would recommend using Javascript to detect the device type and modify your classes via Javascript.
Related
I am trying to get my top menu to be exactly full width of the screen at all times. Sadly, while it works OK on desktop, it keeps extending beyond the expected width when on mobile.
To give some context: I'm trying to build a child theme of the "Rookie" theme (https://wordpress.org/themes/rookie/).
My goal at this point is to replace the default menu of the theme with a top bar, on which I want the burger menu on the left, logo in the middle and the search button on the right.
This is already done, but for a reason I do not understand, when testing on mobile, the top bar is exceeding the expected 100% width. This can be observed when trying with "Phone 6/7/8" of the Chome dev tools. I also tried with a physical device and got the same result.
The page is https://gornik2.kosimus.eu/
Picture from the dev tools
I spent several hours trying to figure it out and I essentially ran out of ideas at this point. I defined the width to 100%, 100vw and so on, tried max-width, checked parent elements and made sure that the width is not increased anywhere.
Pretty sure there is something incredibly stupid and small I am missing. Ideas would be greatly appreciated.
Thanks!
PS There is a bunch of other issues as well on that page (colors etc.
- please just ignore those).
/* Make sure that the header is full-width */
.site-header {
width: 100%;
}
#masthead {
width: 100%;
}
/* Get rid of the horizontal unordered list menu. Always use the mobile-like hamburger menu. */
.main-navigation ul {
display: none;
}
.main-navigation.toggled .nav-menu {
display: block;
background: #000000;
}
.main-navigation li {
float: none;
}
/* Menu bar to the top */
.main-navigation {
display: block;
position: fixed;
top: 0;
height: 65px;
width: 100%;
}
/* As the top bar is 65px high, the open menu should have exactly that margin, so that they don't overlap */
.main-navigation.toggled .nav-menu {
margin-top: 65px;
}
/* Display navigation over other stuff */
#site-navigation {
z-index: 100;
}
/* Top bar styling */
/* Hamburger menu */
.main-navigation .menu-toggle {
/*Send the whole button to the left*/
display: inline-block;
width: 20vw;
height: 65px; /* Set the height of the whole top bar to 65 pixels */
background: #ffffff;
position: fixed;
top: 0;
left: 0;
}
.main-navigation .menu-toggle .dashicons {
display: inline-block;
color: #000000;
position: relative;
left: 27%; /*Required to be positioned properly on the white bg*/
font-size: 4rem;
vertical-align: baseline;
}
/*White BG for the hamburger button*/
.main-navigation.toggled .menu-toggle {
background: #ffffff;
}
/* We're using the full screen search from a plugin, so the field here is not necessary */
.main-navigation .search-form .search-field {
display: none;
}
/* Search button */
.main-navigation .search-form .search-submit {
display: inline-block;
width: 20vw;
height: 65px;
background: #ffffff;
color: #000000;
position: fixed;
top: 0;
right: 0;
padding: 8px 16px;
}
.main-navigation .search-form .search-submit:hover {
background: #ffffff;
color: #000000;
}
.main-navigation .search-form {
display: inline-block;
margin: 0;
}
.main-navigation {
background-color: #1a754a;
}
/* Logo centering and styling */
.site-branding {
display: inline-block;
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: calc(50% - 32.5px);
z-index: 110;
}
.site-logo {
margin: 0px;
float: none;
}
.site-logo img {
max-height: 65px;
}
.site-content {
margin-top: 65px;
}
The pseudo element (:after) added to th tag of the LEAGUE TABLE is causing this issue. This issue can be fixed if the position value changed from "absolute" to "relative".
.sp-data-table .sorting:after {
content: "\f156";
color: transparent;
/* position: absolute; */
position: relative;
}
Screenshot
I am using purely CSS to create a dynamically opening and closing sidebar based on the view-port with of the page. I have a couple issues with my code however:
How can I prevent an animation when the screen first loads? That is, I simply want the sidebar to be opened or closed on first loading, and then animated when the view-port is adjusted.
Why do I have to have two separate animations? Notice I have two identical keyframes toggle and toggle1, which are used for closing and opening respectively. If I try to use just toggle for both animations, the animation occurs instantly. Any workaround without duplicated code?
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#sidebar {
position: absolute;
width: 200px;
background-color: #123456;
height: 100vh;
}
#media (min-width: 500px) {
#sidebar {
animation: toggle 200ms ease-in 1 reverse forwards;
}
}
#media (max-width: 500px) {
#sidebar {
animation: toggle1 200ms ease-out 1 normal forwards;
}
}
#keyframes toggle {
0% {
left: 0px;
}
100% {
left: -200px;
}
}
#keyframes toggle1 {
from {
left: 0px;
}
to {
left: -200px;
}
}
<div id="sidebar"></div>
Just use a simple transition instead of animation, and 1 media query
#sidebar {
position: absolute;
width: 200px;
background-color: #123456;
height: 100vh;
transition:left 500ms ease;
left:0;
}
#media (max-width: 500px) {
#sidebar {
left: -200px;
}
}
https://jsfiddle.net/ufoste1y/3/
You can also use transform:translateX, which should provide better performance.
#sidebar {
position: absolute;
width: 200px;
background-color: #123456;
height: 100vh;
transition:transform 500ms ease;
}
#media (max-width: 500px) {
#sidebar {
transform: translateX(-200px);
}
}
https://jsfiddle.net/ufoste1y/8/
In order to force the sidebar to be opened or closed by default, that cannot be done with raw CSS. You'd need JavaScript to wait until the page has finished loading, and then dynamically update the element to have a class or similar that the CSS animation applies to.
As for the duplicate code, you can certainly just use toggle. It not working for you was probably a result of you forgetting to also change the #media animation reference from toggle1 to toggle.
Here's an example showing the sidebar staying open by default with the aid of JavaScript. The animation is now triggering only on the .loaded class, and the JavaScript applies the loaded class to the element 1000 milliseconds after the page has loaded, meaning that it won't trigger the animation initially.
Having said that, you'll probably only want to trigger the slide on some sort of condition anyway, and JavaScript would be much better suited to that :)
window.addEventListener("load", function() {
setTimeout(function() {
var sidebar = document.getElementById("sidebar");
sidebar.classList.add("loaded");
}, 1000);
});
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#sidebar {
position: absolute;
width: 200px;
background-color: #123456;
height: 100vh;
}
#media (min-width: 500px) {
#sidebar.loaded {
animation: toggle 200ms ease-in 1 reverse forwards;
}
}
#media (max-width: 500px) {
#sidebar.loaded {
animation: toggle 200ms ease-out 1 normal forwards;
}
}
#keyframes toggle {
0% {
left: 0px;
}
100% {
left: -200px;
}
}
<div id="sidebar"></div>
I have some trouble with image hover idea on my website. Currently, my website is on local server, so I can not share the link. But I hope to explain correct.
I use twenty thirteen theme, woocommerce plugin and my task is to make pixel perfect custom design. So, I started with child theme creation and custom css.
My problem is to make add to cart button be visible only on product`s image hover. My current css for cart is:
form.cart {
margin-bottom: 0;
position: absolute;
top: 30px;
margin: 0 auto;
left: 0;
right: 0;
}
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
background-color: transparent;
color: #fff;
border: 1px solid #fff;
border-radius: 0;
font-size: 12px;
display: none;
}
Here is the needed result:
I can not fix the visibility of it only on products image hover.
I can overwrite everything needed. Thank you for help.
Without knowing the structure of your HTML I cannot guarantee this will work, but something like:
.add-to-cart-button{
display: none;
}
.product-image:hover .add-to-cart-button{
display: block;
}
This will only work if your add to cart button is a child of product image or a child of a sibling of product image.
For smooth transition, this is really great. (Display block / none is very rapid)
.img-container {
position: relative;
overflow: hidden;
/* this will hide the overflow that will be happening in translate(100%,100%)*/
}
.cart-btn {
transition: all 1s ease-in-out;
transform: translate(100%, 100%);
/* this will put the element away from the cart */
}
.img-container:hover .cart-btn {
transform: translate(0, 0);
/* when hover, now the element is shown in their original position */
}
I'm trying to make the controlbar bigger for ipad/android. Especially the fullscreen
button. When changing the css it's bigger but work functioning for the whole rectangle e.g.
Any ideas?
ciao Valentijn
this solution is css only.
i simply resized the all elements inside a media query, also the buttons css sprites/background images by simply adjusting the background-size and background-position properties.
the following styles are for the play, pause, fullscreen and unfullscreen buttons only, but you get the point and should be able to complete the missing buttons.
#media only screen and (min-width : 1824px) {
.mejs-container .mejs-controls {
height: 60px;
}
.mejs-container .mejs-controls div {
width: 60px;
height: 60px;
}
.mejs-controls .mejs-time-rail span {
height: 40px;
}
.mejs-container .mejs-controls .mejs-time {
height: 40px;
}
.mejs-container .mejs-controls .mejs-time span {
font-size: 20px;
line-height: 40px;
}
.mejs-controls .mejs-button button {
width: 46px;
height: 46px;
background-size: 400px;
}
.mejs-controls .mejs-play button {
}
.mejs-controls .mejs-pause button {
background-position: 0 -44px;
}
.mejs-controls .mejs-fullscreen-button button {
background-position: -90px 0;
}
.mejs-controls .mejs-unfullscreen button {
background-position: -90px -44px;
}
}
Hi I was wondering if anyone could help me with this. At the moment I have a Nivo Slider, with a Nivo Caption set to display: none; at a certain screen size. It has come to me attention that for some people, seems like iPhones, the caption displays, and creates a white space to the right (too big for the current size), until refreshed. Is there a better way to 'get rid' of an element for mobile?
Thanks.
Al.
You're overwriting a CSS rule.
At some point on the Stylesheet you have:
.theme-light .nivo-caption {
display: none;
}
A bit further:
.nivo-caption {
-moz-box-sizing: border-box;
background: none repeat scroll 0 0 #000000;
bottom: 10%;
color: #FFFFFF;
display: block;
height: 66px;
left: 0;
opacity: 0.9;
overflow: hidden;
padding: 5px 10px;
position: absolute;
width: 440px;
z-index: 8;
}
display: none;
and then
display: block;
I would go for a jQuery approach to get rid of the caption, based on the screen size or even detecting if it's a smartphone (modernizr).
in the jquery.nivo.slider.js
add:
//Process caption
if ($(window).width() < 659) {
$('.nivo-caption').hide();
}
else {
processCaption(settings);
}