I am having a problem where the background image that is centered aligned, and repeated vertically, is only breaking on the Latest News page.
I can't seem to find why it would be breaking, especially as it is fine on every other page within the site, and there is no section of the page that differs in sizes etc.
I have used firebug to inspect all aspects of the page but still can't find what is causing the problem, any help would be much appreciated.
It looks like the background image is placed twice on the page. Since you use one that's 2000 x 2000, the cut comes to early on the page, to make it a problem with the top/bottom not fitting.
Another thing is that the top/bottom doesn't fit, so you will get that cut for all pages longer than 2000 px, which is the reason for the second cut on the page. You should instead use a much smaller image, like 10-40 px high, that will fit when repeated. That will give your users a faster page speed. It might also fix the problem, or help you track down the reason.
I think the page is to long for one image, the it repeat.
But, look at you image, it seem that the top of image is'nt correctly connected with the bottom. (Y know what I mean?).
Related
It is the first time I have ever used image slider on a website, what should I do to make my images not look stretched out?
The problem is not with my slider code, my question is if this is even possible to my images look great with this kind of height/width ratio (I have tried scaling images with Sketch already and this is the best result I have gotten so far)? I also don't want to add more height to the slider since I think slider shouldn't take up that much space.
Here is the website for reference: http://sanbruno.herokuapp.com/
People who have worked a lot with sliders- what should I do to make it look great?
So let's make some calculations - as I can see at webpage you're using 2000x600px size images, what's gives us 20/6 scale = 3.(3). So for 4256px width (if you want to use it all) you should have 1276px height (4256 / 3.(3) = 1276px). So if you crop 1276px width from you original image it won't be stretched out.
I am having an issue with a website for our student-organized congress at http://ebspreneurship.de that randomly bugs roughly 1 ever 5 times - sometimes more, sometimes less.
I have three revolution sliders - one is the above-the-fold content (full screen), just under it is the Elements section with another full width revolution slider(RS) and then on the bottom I have this map.
From time to time randomly one of the 2 upper sliders (the last one never bugs) disappears and shows only the background image. I can't trace what's the problem, i spend a few days on that. I notice that if I start many browsers with the website and find one that's bugged, there is an error on Inspect:
Issue at YouTube Video Pause:
(unknown) TypeError: d.getPlayerState is not a function
Still, tried without youtube video and it bugs the same way with only BG image, so that error is for now irrelevant.
I just don't get what's the problem and I tried disabling all plugins, i tried playing with caching methods or disabling it... Nothing changes it...
Any help would be greatly appreciated!
OK, for some reason on random intervals the page loads with my main layer div being with "visibility: hidden;", while the div of the image has "opacity: 0.0001."
So,i went for brute force solution of overriding all div's ids one by one on both sliders.
It worked, since, as seen in the image, the browser loaded with hidden divs and opacity 0.0001, but my override worked and still displayed correctly. Image of how the bug was overridden and displayed correctly
Thank you for the ones that tried to help (I noticed quite a few good souls that as always are found around here)!!
Good day, I'm having a problem achieving scrolling image with fixed position.
I have done half way of achieving what i wanted by creating two background images with fixed positions, (1 is normal, 2 is gray scaled).
once i upload it into wp site, they stay in background + they stay positioned at the top left of the page, (even after i specify their location, but images fixed to the view port, which what i don't want).
here's the link of my code: [https://jsfiddle.net/rf759hw3/1/][1]
now what i wanted to achieve is:
1 - keeping images in specified position while scrolling.
2 - once i reach to page section which has image, only then scrolling start from greyscale, to original (not while i scroll the page itself).
i found a website which achieve same concept which I'm looking to achieve:
http://tnc.org.cn/#TNC#events (the river section)
but their heavily filled with JS with many dependencies, and i am not yet familiar with js btw.
after days of research i found something which can achive my purpose using js called "Magic Scroll" , but i couldn't find an example which suites my purpose to achieve, which is keeping my images in position as i scroll and overlap one another when i reach their section , any advice or help is much appreciated. Thanks
I'm building some responsive WP themes with the idea/hope to make it super-easy for an end-user to setup a simple site that looks good. This is my first attempt at learning responsive as well and can't quite get a complicated logo / company name / tagline feature worked out. Proportional, centered, unknown widths, oh my!
You can see a mockup of some of the different situations we'd like to handle at http://screencast.com/t/G8O1G4aY. The left shows a rectangle logo, a square logo, then a square logo with some text and a square logo with more text.
The right side shows how we'd like the responsiveness to look, as the screen gets smaller. The image starts reducing from a max-height of 200px-ish to 100px-ish and the font-size starts reducing as well.
Hoping to not have to rely on breakpoints to set the sizes. We've already accepted that were going to have a 'you have JS turned off, its ugly this way' message, so something like http://simplefocus.com/flowtype/ to adjust the font-sizes would be quite alright.
Can it be done?? Can get into more javascript to solve if needed, but hoping for as much CSS handling as possible.
Thanks much for any help! Keep getting this piece or that - but can't get them all together.
Philip
I have been trying to code a responsive thumbnail group that I'd like it to respect to a few rules.
I came very close but the implementation always end up not satisfying at least one of the rules. In other words when I try to do one thing it always cancels the other.
In summary, what I am trying to achieve is something like this -
http://postimg.org/image/4yx6poscz/f57d6517/ (I wasn't allowed to post a picture, sorry)
So basically, what I am after is;
When the user resizes the window the thumbnails (consist of an image and some basic HTML) will shrink up to a point.
When the breakpoint is reached, the most left one will disappear and the rest of the thumbnails will return to their original size.
Continue until the min-body size where we just display the x-axis scrollbar.
So, referring to the image, providing that no resizing is done just yet, the items will shrink, lets say until 20% and then Item 7 will disappear letting free space to the rest of the row to expand to their original size.
I am currently using the latest version of bootstrap however, as you may guess col-lg col-md and etc. classes are not really helpful in this case. I have come up with some custom breakpoints but I can't get my head around the shrinking back to the original size issue. That is where I get stuck.
Also I think it's worth mentioning that Ive been trying to come up with a solution that is pure HTML and CSS however I am definitely open to JS solutions as well.
A good example would be spotify's webplayer (play.spotify.com) thumbnail examples.
Thank you very much in advance for your suggestions.