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;
}
}
Related
I can't find the solution of my problem. My nav active class is displayed mostly on wrong nav-link. I add in my sass:
html {
scroll-padding-top: 134px;
}
to not cover my h2 titles. Next I add to body in my html file:
data-bs-root-margin="134px -30%"
and it works good only on iPhone 5 size. It should look good on the rest of phones size at this moment. It is not responsive for tablets and desktops yet.
What am I doing wrong with this? I think all problems are because of scroll-padding-top but how to resolve this to class active works properly and be active on good nav-links?
All of the basic code:
https://codepen.io/samak6/pen/poKxYVO
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]*/
}
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;
}
}
}
I am creating media queries for a page but I'm having a problem in getting them to break at exactly the points specified in my media queries.
For example I have:
#media all and (max-width:1000px) {
header nav ul.nav_items li a {
padding:15px 10px 15px;
}
}
But when I use Chrome and open the dev tools, and observe the viewport/width of the browser, the CSS rules take effect at somewhere around 1226px. Why aren't the CSS rules being applied at exactly 1000px?
Here is a jsfiddle of my HTML/CSS: https://jsfiddle.net/at68m0zp/
By moving the media query to the end of your CSS file, you will make it override the set values. The later something appears (and the more specific it gets) the more preference it receives. Because your query is at the start of the file, any changes to your header nav's display property later does not get applied. Please not that media queries do not increase specificity or get any special treatment, they just get ignored until they are in the range defined by them.
So there is probably a snippet later in your file with a max-width of, say, 1000px. Because it comes after your 900px one but the screen size makes both valid, the 1000px one takes effect.
I had a snippet with the changes but because you posted your entire HTML and CSS it is too long to post here. Trust me, it works if you move it to the end
326px difference is definately not 'inaccuracy'. Something is broken here big time. I might guess that you have more media queries and mistaken min-width max-width setups somewere.
The best to check what is actually going on:
Firefox - hit F12 (or open Dev Tools when on Mac)
Go to 'Style Editor' in Dev Tools top bar
Column on the right shows list of #media rules (breaking points)
Have fun and good luck with debug.
I have applied a theme called Karma to my WordPress instance and there is an issue (which they deny) that I've had for awhile now and just can't seem to figure out with its CSS.
The problem is that my website, www.LiveCarePC.com is a responsive site. When it resizes for mobile or a tablet, .jqslider seems to fail to resize itself properly. It just becomes a gray bar that bothers you.
Desktop view:
Mobile View:
Karma Theme Mobile View (Live Preview on http://themes.truethemes.net/Karma/homepage-jquery-2-2):
Any help would GREATLY be appreciated. You can inspect the site and see its source there, obviously.
*Note: I've reinstalled Wordpress and the theme itself as well as all the plugins so it's not that. I'm just looking for the solution in the code.
For anyone else running into this error, it seems it's a bug in one of the css files. Below is the fix.
In the karma-royal-blue.css file, you must comment out one of the lines as seen below.
/*------------------------------------------------*/
/* HEADER
/*------------------------------------------------*/
#header .header-holder {background:#182947 url(../images/skins/karma-royal-blue/bg-header-holder.jpg) 0 0 repeat-x !important;}
/* .big-banner #header .header-holder {background:#182947 url(../images/skins/karma-royal-blue/bg-big-header-holder.png) 0 0 repeat-x !important;} */
.top-block {background:#13223C !important;}
The line that's commented out is the line that, well, needs to be commented out. That fixes the error.
This fix applies to the Royal Blue color scheme in the Karma Wordpress theme. It may apply to others as well.