My website content loads further down the page than expected on initial load.
The name and other content appear in the middle of the page, instead of the top.
If I grab the browser corner, and resize the window - even slightly - the content pops back to the top of the page.
I'm unsure of what's causing this.
I've tested on Chrome/Safari/FF on Mac Desktop
The response is normal on a tablet or smartphone
The page is at http://www.mac-works.com/dev/MG/mark3
Notice on first load, Michael's name is in the middle of the page, but if you grab the lower corner and move - everything pops to the top where it's supposed to be
I'm aware there are a number of other posts about responsive content, I've reviewed more than 20, but none seem to address the content not loading properly on first load, but correcting when the browser is resized.
It turns out it was the var marg_top = Math.abs function. Intially set to /2 - I changed it to /8 moved the content up towards the top.
So, if you're using floating content with javascript - make sure you're familiar with the math.abs function.
Math.abs in javascript
http://www.tutorialspoint.com/javascript/math_abs.htm
Related
enter image description here
That's one of my application screens. There is an empty space I couldn't understand where it comes from. I use Navigations, Draver, NativeStack, MaterialTopBars set to the bottom each navigators headerShown is false and also this empty space is on top of the headers.
I tried to change all options to see where it come from but I couldn't. And this is on all my screens
I am a beginner in coding and as a challenge, I decided to make my own portfolio website on react.js + tailwind without the use of extra plugins. (I know, I know, as I figured out later, it was not my best idea)
The main complexity was around making a background behind the slider to look similar to the central slide, and to make a smooth transition.
After hosting the website, I found a glitch that is only visible on mobile browsers. Basically, every time when I change a slide, in the moment of changing State, it flicks the next slide in the array of slides for a millisecond.
I was able to see the same issue in dev tools but does not work every time.
100% visible only on mobile browsers
Small clarification: the slider is functioning by rotating elements within the array by the method Splice. So elements [1],[2], and [3] are always visible on the desktop version while elements [0] and [4] exist but have zero opacity (it is made for the sake of the smooth background transitioning).
The glitch itself: On clicking 'left' the image from element [1] is becoming the central image [2] and it flicks somehow the image from [0] for a millisecond. The same behavior is related to the right image from element[3] and background images. Though, it does not affect the left visible slide [1], because its predecessor is only becoming visible after State change.
My best assumption is that the issue is related to the component "Portfolio" 126 line in the code, but I can not find any other solutions which work.
const onChangeSlide = (direction) => {
if (direction === "left") {
setTimeout(() => {
slides.splice(0, 0, slides.splice(length-1, 1)[0]);
setSlider((prev) => ({...prev , ...slides}));
},700);
You can see the hosted website here > https://Othary.github.io/ArtPhoto
Link to the code here > https://github.com/Othary/PortfolioTest.git
GIF of the issue > https://1drv.ms/u/s!ApRsK-vfrh8MrY9guwisAKJl5bJAfA?e=vkjdGX
I will appreciate any help. Thank you in advance.
Regarding the first issue I checked all images, and their order, and removed StrictMode. No luck for me. I can not grasp how the slider shows the element which supposed to be visible only on the next click. And it is not visible on the fast internet desktop version. As stated above, my best guess is that it is related to the way how I change State.
UPDATE: It looks like after scrolling through all carousels BOTH left and right the flick is disappearing.
So, I assume, it somehow connected with the browser's cache, but I don't understand why it needs to be scrolled in both directions first before the issues disappear. All files are supposed to be preloaded after the first scroll in either direction, not both.
Please help🙌
In the CSS spec for paged media, is there a way to "stick" a block element to the top or bottom of a printed page, and have the text flow around it?
I have some image blocks inline with other HTML (the block is a DIV containing and image and a caption DIV). The problem is that they're tall-ish -- some of them are a half-page in height. If there's not enough remaining room on the page for them, they will move to the next page, leaving significant whitespace on the prior page.
I'd like to be able to absolutely position them to the top or bottom of whatever page they call on, and have the text continue around them.
It sounds like you want "CSS Page Floats". See https://www.w3.org/TR/css-page-floats-3/.
I have applied tour-step-backdrop="true". It applies to only some part of screen not entire screen.
As you can see the bottom part of image is not covered. So if i wanted to cover full screen then how to do it?
I need to make a classic full screen landing page with a h1 title, a h2 sub-title and a call-to-action button to slide the content to the first div of the website. I really hope you can help me because the website should go online soon and this is the one thing that's stopping me from saying it's finished, I'll try to tell you everything so you have a better understanding on what's going on.
Here's my Fiddle: jsfiddle.net/daghene/szp7yf7h/1/
And this is an online version of the real page with the first bit of
content below it http://andreacordioli.com/macwip2
I'm using Skeleton Framework and the div containing the fullscreen image is outside the .container who's wrapping the grid, while the h1, h2 and button are inside it. Right now I have two problems:
for some reason, only in this part of the website, text bigger than a certain point exceeds the page width making the website scrollable horizontally under a certain point
I made it so the text gets smaller under the 550px mark which is where the Skeleton grid comes into play. I tested it on my Motorola Moto X which has around 1280x720 resolution and noticed if I check the website in landscape it doesn't trigger the smaller resolution text propieties and the text exceeds the width of the windo again: this happens on iPhones in Chrome tester too
What I wonder right now is: as of today, what's the best practise to make a 100% responsive landing page with such simple content that is always centered, works on all possible resolutions and device orientations withou exceeding borders and has the text always at a decent size never being too big?
For instance, the text exceeding the width is 8rem which equals to 80px in Skeleton. Here's the page I'm trying to achieve, which I'll need to serve a different image for on mobile when aspect ratio is X:Y where Y gets bigger than X somehow:
If you try it it kinda works and I even tested it on my old, first Samsung Galaxy Tab which has the super old Android 2 or 3 browser which gives me more problems than IE but actually centers everything correctly with this code...but the main issue is that the text isn't scaling properly and if the window is too narrow it either disappears on the right, making the window scrollable on the right and part of the big title unreadable, or if it gets too small(say my 1280x720 4,7" Moto X) the call to action button disappears since the screen window is too short and there's the browser bar too. I put overflow: hidden to this windows to be sure there's no horizontal scroll but the real problem is not the scroll, it's the text exceeding the div instead of getting smaller.
LAST NOTES!
If you check the css there's a "-1rem margin" on the H1 because as I
said for some reason in this specific section the H1, and just that,
doesn't center. The H2 and Button are centered, the H1 is not and
only here...don't get why.
If you try to make the window horizontally smaller you can see the text touches the window on the right side first(both in the Fiddle and in the other link where there's no html and body margins), still can't get why and I feel that's what's preventing the text to stay centered while getting smaller.
It looks to me that some of the problems you describe are because at viewport 550px wide, your h1 font jumps in size from 5rem to 8rem. But at this viewport size there isn't enough horizontal space to hold your h1 text and so it exceeds the width of its parent div, and hence appears to be off-centre.
I think a solution would be to tweak your CSS in http://andreacordioli.com/macwip2/css/includes.css starting around line 1047 to something like the following:
#media (max-width: 625px) {
.bigImage h1 {
font-size: 5rem;
}
...
}
Hope this helps!