I think I have a VERY basic question here. I've been trying to figure this out for a while now: I'm working with an html-template called "Oyster HTML" and I've been trying to disable all functions (or css) that make the site adjust to the window size.
This is the link to the demo of the template:
http://www.gt3themes.com/website-templates/oyster/portfolio_masonry_listing.html
As you decrease the window's width in your browser, you'll see that - for example on the right side of the header - the menu-content adjusts. (doesn't get overlapped)
Same thing happens here: https://learn.wu.ac.at
Now, on 'common' websites like www.ebay.com this is not the case (content gets overlapped by window and doesn't adjust to window resize)
My question: Is this a JavaScript issue? or CSS? (I tried disabling all .js and all .css but the content still adjusted.) Now if it's not in JS or CSS, where can I change this?
As I said, this might be a very basic (or even dumb) question, but I've been trying to wrap my mind around this for quite some time now, and I just couldn't figure it out)
Thanks a lot in advance!!
Related
So my problem is that for some reason on one page of a website I've been fiddling with, the two navigation bars that I have (Top and Sidebar Navigation) are for no apparent reason scaled down in the Google Chrome browser, their behavior is entirely normal in both iE and Firefox. The bar's remain completely functional, but are simply scaled down perhaps to 66% of the intended size.
Here is the code for the page in question: http://pastebin.com/uvrPR1JW
Here is the code for a similar, but functioning page for reference: http://pastebin.com/5dAMREfC
They're running off the same style sheet so the issue is likely in the HTML, however the style sheet is linked in the comment section for reference. If anyone spots any reason why it would be doing anything like this it'd be great to know. And I apologize for the messy code, as I said I'm just playing around with it.
Update:
You may notice that my code includes at least one flexbox, here is question posted by another user that may be related but I can't make heads or tails of it: Chrome shrinks figure elements as they are added to a flexbox
Update: Doesn't seem to be a problem with the flexbox, the issue still exists even when I remove all content except the top header.
I'd say it's the setup of your navbar, how you have an image and you just change the position of it on hover. Chrome has a weird feature where it moves things around when there is images so I would suggest looking up how to make a proper navigation bar (It's pretty easy).
I am trying to perform a scrolling effect.
On scroll, the next page section should cover the current one.
So the current section is docked to the top of the screen and while the next section arrives the current is progressively covered but doesn't move.
Basically I am trying to reproduce the effect I found on this website:
http://www.squarespace.com/seven/interface
It works only with css (I tried with js disabled)
I've tried to reverse engineer it but I am not successful so far.
If someone had so advices I would greatly appreciate.
Main idea is that every <section> has height and position: relative and 'overflow: hidden'. But every tag inside those sections has position: fixed.
I tried looking at the site with JavaScript turned off and got nothing but a blank screen and a scroll bar (same in Chrome, Firefox, and Safari/iOS). Furthermore, Chrome tells me that all kinds of functions get called as you scroll. Unless there is some serious trickery here, squarespace.com seems to be using JavaScript.
Though you may be able to pull of something like the checkbox-hack to set and/or animate the top of different sections, I don't think the result for the minority of users validates the development time.
I put together a small fiddle which should help you on your way if you want something like the website you linked to. Notice that this is still usable if you disable or comment out the JavaScript.
https://jsfiddle.net/kx94my17/1/
Im havin a big problem.
Im programming a website for a company in germany.
Since there are so many sites on the page i took an iframe in my index.html file instead of using a div tag because this would need a lot more time since i need to write the div stuff on every page.
Every Browser like IE,Chrome,Opera and also Safari shows the website like i want it to be shown.
But Firefox shows the iframe part in a small window in the left upper side of the window.
So you cant see any content or even 100x bigger than normally and in a quite small window.
So do I have to change anything in my code or do i need to add something?
The bigger problem is actually that the man who is able to start the server doesnt want to start it for let the website goin online because that doesnt work on firefox.
He explained the problem to me that way. but my program (mirabyte) shows everything in the right way (ALSO FIREFOX) so what can I do now because I need to let him try every small change i will do. So it would be nice if anyone does know the EXACT answer because he or she already had the problem.
Any ideas?
Thank you so much
Sasse
Make sure that if you have the iframe in any sort of container, that container also has the applicable height attribute. Also make sure that the iframe height is applied to both the HTML and the body tags.
Beyond that, we would have to see the part of your code where you're declaring the iframe to say anything more specific.
I have begun developing a webpage, just playing around, and I noticed an issue. I code with my live site on one half of my screen, with my editor on the other. It was all going fine until I extended my web browser fully and noticed that only part of my site was re sizing how I wanted it too. Sadly my site is not live, however I do have a link to the code: http://pastebin.com/yeWzfsBW
In theory, the image (logo) doesn't scale down when I resize the window, it stays the same size no matter what. I attempted to use percentages instead of pixel width/heights however it seemed to have no effect. I will try to pop this live so you can see what I mean exactly.
Fullsized browser: http://imageshack.us/photo/my-images/585/fullsizen.jpg/
windowed mode: imageshack.us/photo/my-images/42/resizedkl.jpg/ (please put in the http:// I couldn't link more then two links in this post)
Hopefully you can see what I mean, i'd like the logo to scale, like the #info css section.
Thanks!
no need to wrap the image in a div.
set width & height in css.
set max width and max height.
there is a challenge with keeping the aspect ratio on the image.
to get started, below is an example using your code. after looking at this you may provide feedback about exactly you are trying to achieve.
http://codepen.io/seraphzz/pen/thGkI
I am trying to put together a simple portfolio site, and have implemented a basic responsive design into the CSS as well (at the very bottom of it), and it behaves just fine - shrinks the 5 columns down to a single column and hides a few elements when I resize the computer browser. But on iPhone/Android browser it doesn't make any difference.
Here is the page in question -> Sample Page
And I can't figure out what the issue is... as in, this should be fairly simple to do, but apparently it's not, and now I'm losing sleep over it... so might as well ask here.
Have you [also] consider the use of viewport meta-tag? Just check This.
I tried loading the site but it seems like your custom js file is not found(404 error).