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
Related
Im helping out in cleaning up and renovating a website for a friends organisation/art place.
We are working on Gallery of images of the last years of business. Looking at it from a Firefox browser, all looks good. Taking a look at it from any Safari version or Chrome all the images seem to bunch together and overlay in different ways.
See link to one of the gallerys-> http://www.stallbergsgruva.se/2018-2/
I have searched a bunch of forums and threads for this but can't seem to find the answer. Im a beginner at code but can handle it if you add a more thorough description of what code and where to add it, etc.
Thank you in advance! // Erik
You didn't provide a fixed height to the li, if you don't then you won't be able to properly use object-fit: cover; Here it is the css, also added a margin-bottom just to prove
#media (min-width: 600px) {
.wp-block-gallery.columns-3
.blocks-gallery-image,
.wp-block-gallery.columns-3
.blocks-gallery-item {
width: calc((100% - 32px)/3);
margin-right: 16px;
margin-bottom: 23px;
height: 290px;
}
}
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 know about #media css tag however it looks like no matter what I set the padding, I se no padding in "print" for my website.
I want to set a padding for print so that I want the website to be printed out with a custom page spacing around the text rather then letting the printer/browser "fit" the content with almost no white area around the website.
Any solution(s) is appreciated.
Did you take a look at the #page rule ? https://developer.mozilla.org/en/docs/Web/CSS/#page
#page {
margin: 2cm;
}
It's from CSS 2 specs, so it's supported by all major browsers (included IE8+).
It might help if you showed some code — it's hard to offer a solution if www can't tell what the problem is. This works fine for me in Safari on a Mac:
<style>
#media print {
body {padding:100px;}
}
</style>
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.
When using responsive design, is there a way to still allow a user to view the full site?
E.g. They are viewing on an iPhone, but want to see the full site. They click a "Full Site" link, and it shows them the 1024px version.
If you're using media queries, only apply rules beneath a body element having the class 'responsive'.
#media screen and (max-width: 320px) {
body.responsive {
color: blue;
}
}
If the user doesn't want to view the responsive layout, simply remove the 'responsive' class from the body element, nullifying all rules. You could persist the users preference by cookie or some other method as well.
Demo: http://jsbin.com/obaquq/edit#javascript,html
Reducing the window to no more than 500px will turn the text white, and the background blue. This is conditional on the body having the 'responsive' class. Clicking the first paragraph will toggle this class, and thus toggle the effects of the media query itself.
I've been wondering about this. I had success using jQuery to modify the viewport tag, seems to work fairly well from what I can tell so far. Doesn't require multiple stylesheets or a lot of extra CSS.
http://creativeandcode.com/responsive-view-full-site/
Haven't tried this, but thought about this issue myself. I imagine you could use a stylesheet switcher that deactivates the core responsive stylesheet, leaving the user with the full version
Switching stylesheets certainly isn't a new concept. Here is an article for ALA circa 2001 addressing switching stylesheets: http://www.alistapart.com/articles/alternate/