I have a problem with some link in the upper menu of the account and the language selection of this site: shop.castorfashion.it.
When viewed from a mobile device (both android and ios) menus need to be tapped twice to work.
I can't find a solution to solve the problem.
The site was created using prestashop.
Account menu:
Languages menu:
Thank you.
I just tried your site on my iPad and the double tab comes from the hover style. You can remove it with media queries.
#media only screen and (min-width: 1000px) {
#topbar a:hover {
color: #79c753;
}
}
You still have som main hover styles in your site.
Related
I'm really new in coding and I created my first page ever with html and css. The thing is, I'm struggling with making the page responsive.
I know that I have to add the #media query and that, but, once I add it, I don't know which parametres should I change (text, etc) and I can't see how the result would be since I'm using a computer.
I would like a clear explanation or some examples because I've been looking up on Internet and I'm still very confused.
https://codepen.io/jomby/pen/NWvVNpQ
NW vVN p Q
This is the link to my page. In this case, when I see the page on the phone, the text stretches a lot and also the gallery.
Maybe you could tell me how would you make this example responsive so that I can learn that way.
Thank you very much in advance, for your time and patience!
The way you work with Media Queries is by:
Decide what to do first, mobile or desktop
After you do it, start by coding your webpage and once you finish you start adjusting your screensize and see what elements get misconfigured.
Here are some patterns you can follow, however you're not enclosed to configure your settings in these sizes:
#media only screen and (max-width: 1200px){
/*Tablets [601px -> 1200px]*/
}
#media only screen and (max-width: 600px){
/*Big smartphones [426px -> 600px]*/
}
#media only screen and (max-width: 425px){
/*Small smartphones [325px -> 425px]*/
}
I ran into a problem as I tried to use the hamburger-menu not only for mobile but for all devices with max 1100px. I am using the shopify debut theme. At first everything went fine. I saw the hamburger-menu and could click on it. But as soon as my window has a pixelcount of 750 to 1100 I can click on the hamburger icon, but nothing shows up. This looks like this (between 750 and 1100px).
Instead it should look like this (below 750px).
I already changed the #media only screen and (max-width:750px) to the 1100px and the #media only screen and (min-width:749px) to 1099px inside my theme.css for pretty much every header class. Which made the hamburger icon show up. But now I hit a roadblock. I don't know what I am missing here.
Any help is greatly appreciated. Thanks!
Just in case you need any of these:
My Website URL: www.snow-pearl.com (without any chances to the #media because it is the live version and I dont want to publish something that is not working)
Here is the edited theme.css file (with changes).
Here is the used theme.js file.
Here is the edited header.liquid file.
The reason why your hamburger isn't showing is due to line number 800 in theme.css
#media only screen and (min-width: 750px){
.medium-up--hide {
display: none !important;
}
}
My button changes its color on :hover, see:
button {
background-color: orange;
}
button:hover {
background-color: darkorange;
}
Example: https://jsfiddle.net/oepb5ks4/
Works great on desktop, but on mobile - where :hover should not exist – the browser* still changes the color, but after touching the button.
Why is that behavior? Am I missing something? What makes somebody think that implementing (parts of) :hover on mobile browsers makes any sense?
Is there a nice and clean solution for this (preferably without Media Queries or JavaScript)?
*Tested in Chrome (in "Device Mode") as well as in iOS Safari.
In you CSS you could filter for mobile devices with the #media rules and filters (documentation at w3). You could state "if the media has the hover functionality then the hover color should be orange":
#media not all and (hover: none) {
a:hover{
color: orange
}
}
You also could try to detect it with JS and manually adjust the color to always be orange when on mobile.
I believe that your problem occurs because in order to click on a button on PC you must have hovered over it before, so the color changes on mobile after you clicked it.
Update I just read the comment under the question by Temani Afif: apparently :hovers are "converted" to something like :onclick on mobile because of the lack of the hover feature on phones. As many websites have on hover menus mobile users couldn't access those if they wouldn't translate it.
Another thing you could try is to force the color of the visited links with this:
a:visited {
color: orange!important;
}
Update 2 Included the new media tag and took advice from this answer on a different question and it's comment on how to use not and the #media rules.
Overview
This issue is about an uncertain freeze during scroll of <ul /> which is
styled with CSS
-webkit-overflow-scrolling: touch
on the Safari browser of iOS.
Similar issues
I read similar issues or posts
Div scrolling freezes sometimes if I use -webkit-overflow-scrolling
iOS 9 `-webkit-overflow-scrolling:touch` and `overflow: scroll` breaks scrolling capability
Webkit overflow scrolling touch CSS bug on iPad
http://patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/
and so on.
But I can not perceive which solutions fix my problem.
HTML and CSS for this issue
I displayed the next index.html with index.css on the latest model of iPad.
index.html
https://github.com/jun68ykt/wos-touch-sample/blob/master/index.html
index.css
https://github.com/jun68ykt/wos-touch-sample/blob/master/index.css
These are very simple. The index.html above has only one list <ul />
which includes 50 items and is contained by <div class="container"> .
Reproducing situations of this issue
Maybe you can reproduce according to the following procedure.
Scrolling list to reach the bottom of it
After confirming the side bar vanished, touch and try to move further down.
Of course, list can not be scrolled
Next, change the direction of moving finger and try to rewind to the top
But I found that the especially first stroke of finger directed to top did not work.
After a few seconds, I could touch and move list to the top.
For better understanding, I posted the movie into YouTube in which I operated iPad to display HTML above.
a Sample of -webkit-overflow-scrolling: touch
https://www.youtube.com/watch?v=MkAVYbO_joo
The problem point 4. of the procedure items above is viewed at
about TC0:08 of this movie.
It should be noted that my iPad in the movie above is
iPad 9.7inch (latest model)
iOS 10.3.2
and I use the Safari browser in it.
Wanted answers
Would you do me a favor? I need some help for next questions.
Why does the situation like 4. of list above occured ?
How to fix HTML or CSS to let the list scroll more smoothly ?
Sample program
A sample program which was displayed in the movie above can be downloaded from GitHub.
Following URL is its repo.
https://github.com/jun68ykt/wos-touch-sample
This sample requires Node.js to run server.
Best regards.
A method which can bypass the issue is using the body's scroll. But it is for certain scenario.
in your css
overflow: hidden;
or
overflow: scroll;
you can use css #media rules for different displays
Use #media rules for different displays.
Example:-
#media screen and (min-width: 900px) {
article {
padding: 1rem 3rem;
}
}
#supports (display: flex) {
#media screen and (min-width: 900px) {
article {
display: flex;
}
}
}
is there a special html/javascript code that I can use? So I basically have a non mobile optimised website. I want to show a simple one line message to users browsing my website using mobile devices. The message should only show to mobile users.
Your help is greatly appreciated! :)
Thanks
You should look into media queries for CSS. Basically, you can specify a max/min width, then make a class that is only visible on those widths.
For example:
.mobileView {
display: none;
}
#media (max-width: 767px) {
.mobileView {
/* CSS here */
}
}
Please note that you can adjust the width as needed. Here is a quick source to get you started.