I want my webpage to look something like that: https://i.imgur.com/9rOPhRM.jpg no matter what browser I use (opera, chrome, firefox etc), but I don't know how to do that. And more than that, I have a second problem (which I think is bigger) when trying to resize the window or zoom the page. I recorded it: https://www.youtube.com/watch?v=-Qcy-VIRAfY&feature=youtu.be
This is my code: https://justpaste.it/6co8x (the things which are not relevant are bolded).
Can you help me, please?
About your page, I would suggest for you first that you use a css grid or flexbox as an elegant, responsivness way to style your components, and maybe you can start by this article if you don't have ideas about it:
https://medium.freecodecamp.org/learn-css-grid-in-5-minutes-f582e87b1228
after that I would suggest that you use some media queries in either your HTML or CSS/SASS code, maybe something like this can help:
https://medium.com/#clergemarvin/create-a-responsive-site-using-css-media-queries-d56e39a892e6
PS: you can get rid of media queries using css grid elements. hope it helps ;)
Related
I am new to web development, especially Jquery and Bootstrap.
I am trying to include Jquery Isotope to achieve a Pinterest like layout in one of the pages of my yet to be launched dream website, but I have run into few problems here. Since my html code is too long and I am in kind of in a hurry, I have made these .gif images that explain the problem better than my explanation below:
The html elements I want to apply Isotope to come in a loop and seem to load properly upto only a few iterations. After that I can see a lot of gaps between the elements. If I try to resize the browser window, they rearrange themselves and everything is fine again [Please see image 1 to get a clear picture]. Note: This problem seems to exist only with the divs having Images. The text only elements are perfectly arranged.
I want to the elements to re-arrange themselves if I remove any of them, which doesn't seem to work.
Also, the elements are of variable heights and can be expanded in few conditions. I want the elements to rearrange themselves even in this case. [Please see image 2 to get a clear picture].
JS
if ($('#container').length) {
$('#container').isotope({
itemSelector: '.container-item',
layoutMode: 'masonry'
});
}
Please help me solve these problems. Thanks in advance.
It's hard to tell from the code and samples provided, but I think these are from default CSS margins or padding from masonry. When you open this in your browser, use your inspect element tool to see what classes are causing those gaps, then override that CSS. Wish I could be more help, but this is the best I can do with what is provided.
What you are trying to achieve and what i have understood.Please have a look here
http://cssdeck.com/labs/css-only-pinterest-style-columns-layout
Complex Grid Layout, Help!
I'm making a responsive website using bootstrap 3.0.2 and can't figure out the layout that is stated in the requirements document for the project. I made an image of what I need, and will give more detail, or update my question, if needed. I am open to any suggestion on how to accomplish this.
The Issue
This image describes what I need the design to look like at three different widths.
I should add, each box will be basically a div with an image, article title and summary within it.
Like to say ... in advanced
Id like to say thanks and apologize in advanced if the question is dumb or the answer is obvious. I have been a dev for a long time, but I'm new to responsive design and I've been banging my head on the wall trying to get this to work
The problematic part of your project is to make two smaller blocks side with a bigger one and make these two 50%. As far as I know, there are no mature cross-browser solutions that would accomplish that without javascript.
You may want to take a look at: Flexbox and for Comrade IE Flexie.
Another approach to accomplish the same could be using viewport dimensions. Just be aware of the browsers support.
All in all, if you can do that, I would suggest just using JS, with a fallback to css that will not break the site's look too much. Having just finished a project with similar requirements, I would just like to say good luck.
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).
I'll start by saying this is not my work, but I am trying to figure out how to fix it nonetheless... Here is the page in question:
http://www.getredwood.com/pro/
The three content areas at the bottom are the part in question. It looks fine when I look at it in Firefox or Chrome, but in IE 9, everything collapses left to right and the boxes actually overlap each other a bit. The CSS that's in there now looks a bit of a mess and I'm not sure where to begin. Would be most grateful for any ideas. Thanks!
I'm not sure whether I need to post the CSS code here or not...it should be visible through "Inspect Element" in FF, but if anyone can't see it, please let me know...
This lies within the compatibly that browsers have, what you will need to do is use javascript to determine which browser is in use then create a custom style for each, thus allowing you to make it work on any and all browsers
Here are some links that should help you out
http://www.quirksmode.org/js/detect.html
http://www.w3schools.com/js/js_browser.asp
Best of luck to you
it is very bad CSS and HTML coding...
try to reduce width of each 3 divs, should be solve your problem.
So I have a PDF brochure that we're trying to create a printable HTML version for.
I'm running into a few obstacles including:
Zoom at 100% vs. Shrink to fit (defaults appear to be different in FF/IE)
Only printing one page and not having any space after the
footer (or even just getting "page-break-after:always" to work)
I have a fluid layout that I'm trying to just use a width: auto on the main wrapper for, but this means not having any kind of width constrictions on the front-end of the HTML page. I don't want to use a min-width or anything. Was hoping since this is page is strictly for print, I wouldn't have to add a print style sheet (just typing this makes me think I pretty much have to...)
Should I just use a fixed layout on the HTML page and a fluid layout on the print page?
I may be over thinking this...
Thanks so much for any help.
I would say make ONE HTML page. Then, create two separate print media CSS files: one for Firefox, the other for IE. Use a conditional comment to read the browser and figure which media print stylesheet to use.
A little bit of work, but it should work for you.