I have been searching online for a few days now trying to crack this:
My code approx layout:
<body>
<div id="wrapper">
<div id="top-header"></div> <!-- This is a fixed position header -->
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
I'm trying to make my footer so it works in the following two scenarios:
1) When there is little/no content the footer sits at the bottom of the screen (to avoid ugly/unprofessional-looking gaps)
2) When the content overfills the page (requiring a scrollbar), the footer is at the bottom of the PAGE (ie: is initially hidden until you scroll down).
Unsuccessful FIX #1
So far, I have tried using position:fixed, which works in scenario (1) but in scenario (2), the footer is always visible (in its fixed position at the bottom of the window), which I don't want. I only want to be able to see the footer when I scroll to the bottom.
Unsuccessful FIX #2
I then found a little more success by absolutely position the footer relative to the 'wrapper' div (which had a min-height:100%). In scenario (1) this worked fine! But when I tried scenario (2), the footer would appear absolutely at the bottom of the "window" but not the bottom of the "page" (or more specifically the 'wrapper' div). When I would then scroll down, the footer would move with the page and cut across the content - very strange! ...... It seems the problem is arising because the height of the 'wrapper' is relative to the window size (height:100%) and this varies in real-time as I change the window size. Is there a way I can state the height of the 'wrapper' div to be 100% of the 'page' rather than 100% of the 'window'? If you think there is a better method or need to see the source code, please let me know... I will happily provide.
I have posted this question because even after following several detailed instructions to fix it, and searching in the archived threads on this site, I have been unsuccessful. Any help would be most appreciated.
JMSSTKS
Related
I'm running an online store on prestashop. I've already handled all of the necessary adjustments for images and videos and I'm working on minimizing loading time, however I've noticed that a lot of my CLS score comes from the main div containers on my product page
This seems to be the case with all prestashop sites, at least the ones I've tested with PageSpeed Insights. What would be a good way of handling this? Adding aspect-ratio doesn't seem to work plus it obviously breaks everything since the heights of these containers are dynamic. Adding min-height doesn't seem to be doing anything either.
Example product page: https://vipkoszulka.pl/3303-94167-pielegniarka-koszulka-long-z-kieszeniami-medyczna.html
WebPageTest has a useful Web Vitals diagnostic page where you can see the before/after of individual layout shifts. Two of the most significant shifts are when the breadcrumbs at the top load and push the product image down, and when the product image loads and pushes the rest of the content down:
The product image has a style of height: auto; width: 100%;:
<img id="itzoom-products" class="js-qv-product-cover" src="https://vipkoszulka.pl/10826-large_default/pielegniarka-koszulka-long-z-kieszeniami-medyczna.jpg" alt="" title="" style="width:100%;" itemprop="image">
So the browser doesn't know how much space to reserve for the image until it loads, causing the layout shift. You should set explicit height/width styles for the image so that the area can be reserved before the image loads.
Aside: the product image, which is also your LCP, has an intrinsic size of 1500px by 1300px, despite only appearing as 300px by 286px on mobile. A lot of bytes could be saved—potentially also improving your LCP—by using a smaller image!
Similarly for the breadcrumbs, if they're asynchronously added they should have space reserved by setting a height/width. It will appear blank until loaded, but as far as Web Vitals are concerned it would alleviate the CLS issues.
You can read more about CLS optimizations in this guide: https://web.dev/optimize-cls/
I just had a heavy problems with a vue cli project with interactjs
the latest version is installed
"interactjs": "^ 1.10.3",
I use in vue https://github.com/kimuraz/vue-interact
Now I have the following problem, in a dummy project I have a component from which several multitouch elements can be created, these can be scaled, rotated, sorted ... all of them work wonderfully with dummy content.
in a real project I have a div that acts as a container for a scrollable content, suddenly the drag in this area no longer worked. At first I thought it was because of the container/scollable div combination, but when I remove the container the problem remained.
The problem currently occurs when the element loaded into the slot is a text element with a few lines of text. with 2-3 lines it can be moved on the text, if there are more lines the drag start and move event will be triggered, the move only a few times. so the window can be moved a bit.
what can it be, how can i handle it?
here the simple structure of the component:
<div :style="scaleRotateStyle" ref="scaleit" class="scale-element" v-show="isWindowActive == true" #mousedown="touchDown">
<div class="window-content-back" ref="content">
<div class="window-content-scroll">
<div class="window-content">
<slot :idNr="idNr" ></slot>
</div>
</div>
</div>
</div>
edit: after further testing I come to the following conclusion:
it is due to the overflow-y: auto of the scroll container.
.window-content-scroll {
...
overflow-y: auto;
overflow-x: hidden;
...
}
if I set this property to hidden I can touch it anywhere as usual.
what options do i have?
Pack the class '.window-content-scroll' in ignoreFrom within interact.js. Unfortunately, the entire content area is then no longer draggable, I thought I could move the window horizontally ...
scrolling the window content via javascript, does that make sense, is there a good example?
maybe someone has a nice idea?
Closing the loop for others who might find this: touch-action: none; worked for me, as suggested in #Shmack's comment. Was working with mouse, not touch.
I've coded this website: https://feetup.com/
All works fine, except that in safari the fixed header at the top hides under the content when scrolling. This happens only the homepage. I tried everything I could find online to fix it, without success.
Any suggestions are welcome!
I tried two ways and it works for me, you can try and pick the most suitable way for your site:
Disable overflow: hidden on .hero-index, the header still remains when it is outside of the hero element.
Bring the <header> outside and put it above the <div class="... feetup-hero hero-index">
I ran into this issue while building my online design portfolio. It seems complex to me, but I know there is a way to do it, so I am frustrated that I can't find a solution. Please help!
My design calls for the use of media queries to optimize my site for mobile, tablets, and desktops/laptops. The mobile version has a single column of thumbnails. When each thumbnail is clicked, a hidden div is revealed below it via jQuery slideToggle, pushing down the other project thumbnails.
That is how the mobile version works and it works great. The problem is the tablet and dektop/laptop versions. For those versions, I want the the thumbnails to display in a grid pattern. Two side-by-side on tablets and three side-by-side on desktop/laptops with infinite rows for all versions. I can make them display in a grid with HTML, but the problem comes when a thumbnail is clicked and it reveals the div below it via slideToggle. Since I'm using media queries, the order of the HTML is still the same as the mobile version and the hidden divs are directly below each thumbnail in the code. Thus, revealing the hidden div pushes down all the other thumbnails, including the thumbnails in the same row as the thumbnail that is being clicked (if they come after it in the code). The last div in each row does what I want it to; the next row is pushed down when the hidden div is revealed. I want the hidden div to display below the row it is in and push down the thumbnails that are in the rows below.
And obviously I want to stick with media queries to avoid creating separate HTML, if possible.
Repeating HTML for the thumbnails and hidden divs:
<div class="body">
<div class="thumb"></div>
<div class="projectWrapper"></div>
<div class="thumb"></div>
<div class="projectWrapper"></div>
<div class="thumb"></div>
<div class="projectWrapper"></div>
<div class="thumb"></div>
<div class="projectWrapper"></div>
<div class="thumb"></div>
</div>
I created a jsfiddle to demonstrate the problem: http://jsfiddle.net/EuHyc/13/
Please note that the divs are hidden using jQuery. Hiding them with CSS was not allowing my content within the hidden div to display properly when revealed. Also, I had to use display:inline-block because float:left does not force the hidden div to appear below it in the layout.
I hope I adequately explained the problem. Thanks in advance for any help! I sincerely appreciate it!
So.. I have a dynamic width page. Below, the wrapper div centers the divs inside of it. However, each div has a style of:
display:inline-block;
width:400px; /* static */
This makes the inside divs, side by side. But that means that there is some whitespace left over depending on the width of the browser and how many divs can go side by side without breaking to the next line.
To get an idea of what I am going for, open up your Google Chrome New Tab page and drag your browser window to make it smaller. You will see that when you go too far, some of the chrome apps bump to the next line BUT it still stays centered.
In my case, they bump to the next line and become not centered.
This is what my code looks like:
<div class="wrapper">
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
<div class="iB"></div>
</div>
I want the inside divs to be side by side unless there is not enough room in which case the end one will bump to the next line down, ALL while staying centered in the parent div.
Thanks for any help.
If I understood you correctly adding text-align: center to your .wrapper styles should give the desired effect. See this fiddle for an example. Resize the result panel to watch the reordering of the boxes.
Like Akaishen already mentioned inline-blocks flow like text. That's why you can control their alignment with text-align. However if you want very fine control over your layout you might run into problems using inline-blocks. Since they flow like text whitespace between them is not ignored for instance. And unfortunately you can't really determine the absolute width of a space across browsers and OSs. The gaps between blocks in my example are caused by this.
As you are using the display: inline-block the <div> tags are essentially inline elements and can be styled as such. text-align: center would center each element. At this point, you need a container / wrapper to define the maximum and minimum widths.
There could be a better way to achieve what you are looking for, and this is not exactly like how the Chrome windows work, though it's a start: fiddle