Now that I’ve mostly got everything on my website (WordPress, Theme: Twenty Twenty) right the way I want it to be, there is still a problem for which I can’t find a solution. I have activated the “Cover-Template” on all pages. Everything looks as it should on the desktop computer. Not on the mobile phone, however, at least not in Safari and Chrome. I solved the problem that the background image or the cover template is too wide on the side and is not automatically adjusted with “width: 100dvw” and “height: 100dvh”. Unfortunately, however, the “entry-title” and the “scroll indicator” is still not displayed in the “viewport”, but below the visible area. With two-line titles you can at least see a little of the upper part, with one-line titles nothing at all. In Firefox and Edge everything works… the image is fully displayed, as well as the title and the arrow. What can I do here?
I would be very happy about a solution! Thanks in advance.
The page I need help with: admin4you.net
Related
I'm having a mare trying to get names to appear alongside data on a google bar chart. It should be simple!! Looking at the examples I should not have to add any options at all, they should appear by default but they dont. Even when I copy/paste the examples from
https://developers.google.com/chart/interactive/docs/gallery/barchart
They render without the names against the rows. Can anyone take a guess as to why that might be?
If I position the vAxis.textposition as 'in' then they DO appear in the bars, but when I put them to 'out' they dont. I've configured the text colour to be black in case they're writing in white, but they still will NOT appear.
Any help or ideas gratefully received
This was because I had a style that was being applied within the generated chart HTML. Even though the rest of the content looked fine, the sizing meant the labels were not generated
I am working on a new version of our website, based on a commercial framework (Aspdotnetstorefront) with a responsive template.
We have a few pages where we want to include a Facebook "like button". I tried to use the same code we have in our current site in the new responsive version but it's ruining the design (its width disregards the limit of the device screen size and so the contents of the whole page is cut).
The code we have is the one auto generated by the Facebook developers page (it creates a class called 'fb-root').
I checked the Facebook developers page and the solution they offer is still the old one I have, or in other words, completely useless.
I would like to know if there is any available version that WORKS.
Thank you!
PS: This "facebook like button" RIGHT BELOW is exactly what I need as it seems to work very responsively.
I just upgraded from version 4.1 from a month or so back and suddenly my section (horozintal-nav) is being hidden on screen sizes above 768px. Prior to the upgrade it would display as a horizontal nav above 768px and as an accordion on smaller screens.
I am using compass and sass.
I have also tried cutting and pasting their example code from their documentation into the top of my page and I get the same behaviour with that as well.
The CSS that hides the control...
/* line 49, ../../../../../lib/gems/1.9.1/gems/zurb-foundation-4.3.1/scss/foundation/components/_section.scss */
[data-section='horizontal-nav']:not([data-section-resized]):not([data-section-small-style]), .section-container.horizontal-nav:not([data-section-resized]):not([data-section-small-style]) {
visibility: hidden;
}
Is anyone else having this problem?
Seems I just needed to add data-section-resized attribute to my container.
<div data-section="horizontal-nav" data-section-resized>...</div>
So simple fix, but that isn't in the zurb documentation - does anyone one know what that attribute is for?
I ran into this problem as well. The above answer didn't quite work for me because all my tabs were squashed to the top right, overlapping each other.
This thread helped me sort it out:
https://github.com/zurb/foundation/issues/3555
This isn't broken. Sizing can't be calculated correctly when elements aren't visible. If you're going to hide them and then show, you'll need to call reflow or fire the resize event to get things to calculate the correct sizes.
At least for my case, my items were being loaded AFTER Foundation was able to calculate the widths, so it always went to 0.
Hope this helps!
We added Facebook Open Graph tags to our site NowGamer.com a few months back and everything worked perfectly initially. But in the last few weeks we've noticed that on about 2/3 of images the og:image would not display when an item was shared or liked. Sometimes going to the linter would scrape the page and the image would then be available.
But in other instances the image thumnbnail doesn't appear in the linter - although the link to the full image displays it at full size OK.
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.nowgamer.com%2Fnews%2F1298151%2Fassassins_creed_3_join_or_die_freedom_collectors_editions_details.html
The images all fit within the 3:1 parameters although they are relatively large (they have to be as they are screenshots for video games). Here is an example of exactly the same type and size of image that does display in the Linter and on shares/Likes
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.nowgamer.com%2Fps3%2Fps3-reviews%2F1293635%2Fresident_evil_operation_raccoon_city_review.html
I can't see why one works and the other doesn't. Any suggestions?
The thumbnail's width AND height must be at least 50 pixels, and
cannot exceed 130x110 pixels.
http://developers.facebook.com/docs/share/
Strange: I would have gone with a cache problem which I've also experienced before. For pure testing purposes if you want to attempt to refresh a different version of the URL try adding ?v=1 or some other parameter which makes the URL unique. This forces Facebook to go and get the URL again so you can make sure the images are working as expected.I think YouTube have also had this problem over the last few months http://groups.google.com/a/googleproductforums.com/forum/#!category-topic/youtube/sharing-and-connecting-on-youtube/YnTqofAhcN8
As the title says on a website is it possible to tell if a user has viewed a portion of the page?
Will moving that portion to a separate iframe work? then if they scroll to the bottom, issue a get request for a small image file..forgot the name of the technique..
Update: It is called Web Bug..A Web bug is an object that is embedded in a web page or e-mail and is usually invisible to the user but allows checking that a user has viewed the page or e-mail. One common use is in e-mail tracking. Alternative names are Web beacon, tracking bug, tracking pixel, pixel tag, 1×1 gif, and clear gif.
If you are talking about to check if the user has actually viewed some part of the page you would need to install a web camera and track his eye-movement.
If you are talking about detecting how far the user has scrolled down the page, you can use Javascript to detect this in the OnScroll event. You can then fire some ajax to the server if you need to record this.
I'm not sure this would be ethical - but technically if you use javascript, you could detect the mouseover event of each paragraph tag in the document, and then AJAX that information back to the server. As the user scrolls down the page, they're likely to mouse over the paragraphs, and then you know at least approximately where they've read to.
Not reliably, no.
Simple example: I middle-click on a link, which opens it in a new background tab. I then decide against it, and close the tab without ever looking at it. Any JavaScript trick is going to report that I viewed everything above the fold.
More complicated example: A newbie user doesn't have the browser window maximised, and a portion of the browser window is off-screen. Any JavaScript trick is going to report as if the entire viewport is being viewed, so even restricting your query to only the cases where scrolling occurs will not help.
Unless you require a user action of some kind, all you will be able to tell is that they downloaded some portion, not that they actually looked at it.
Sure. Put that content inside a div, then in your html, with some javascript, capture the onmouseover event and do your work there. If they've put their mouse over something, it's a pretty safe bet that they've seen it, I'd say...
Hope this helps.