I am having a bit Problem with my 3 buttons that I am using for my site. I somehow managed to show all my three buttons in a single line (As you can see in the snippet) but I am not able to make them responsive. Means, when the screen size reduces (i.e. to 380dpi), I want my 1 out 3 buttons to shift to the bottom and the rest 2 buttons to remain on top but in center. As you can see in the attached picture.
I am not good in coding, that's why I request you, people, to help me.
Set 'flex-wrap: wrap' to the element with a class testing.
Related
My web page is simply consisted of 3 sections:
1:section 1, on the left, it is responsible for displaying messages, it is a small area and is "aligned" to the left of the screen.
2:section 2, on the right, it is another area and is "aligned" to the right of the screen.
3:section 3, on the middle, it is the "main" area of the page and it is consisted of quite a few number of elements that "fixed" with the screen by many div tag. I really think I over use the div here.
I have already made the section 3 look organized by manually fixed (define absolute position and pixel) those div. But it only look good in my computer with one screen size. I want to make it responsive to other devices by using mediaQuery. But since I got so many div it will be a pain to specifies the position for each. Can I wrapp the whole section 3 with another div wrapper and then just change this wrapper position? I tried but I failed.
Or is there another efficient way? I am open for bootstrap but I can not find any framework similar to my design. And My design is really simple so get it done without a template would be the best.
Section 3 looks like this:
https://jsfiddle.net/9jpdw4f7/
I am still trying to sort the size of top menu on "page2";
however I need this work to soon, and wonder if the other way will be to add a couple of boxes, like 2 containers to give ample space for the menu to work as it is designed to and get smaller.
Here is the URL as there are loads of codes: http://www.dijon-egg.com/Possum/
Thanks a lot,
Byron
I am trying to keep my boxes from moving when zooming in-out/resizing.
Snippet to my code is here: http://www.bootply.com/qngh4aarVh
I want the three boxes called .col-xs-4 not to move when resizing. I want them to be the same width all up as navigation. I will also later want to make it that when the width is below 480, they appear one under each other, under the carousel.
Thank you for any assistance.
Trying to match something similar to this. http://educationwp.thimpress.com/
This is essentially what I'm trying to do:
I have an image I want to use as the background for the webpage, and I want to put content over it, while keeping everything responsive so it's always centered!. I'm using Foundation 4, which is making things tricky (but I want to learn how to do it this way). The black boxes will be images, and the idea behind this is that everything can remain responsive.
The black boxes are supposed to be centered. I've tried using absolute positioning for the boxes and forgoing trying to put them in a , but it doesn't seem to work too well (i could be doing something wrong).
Overlapping anything in Foundation 4 seems tough. I must be going about it wrong somehow. Thanks for your time!
I'd need to check your HTML code structure to confirm but I think what you want is .small-centered and .large-centered (they work the same as .small-1,.large-1 but for centering).
http://foundation.zurb.com/docs/components/grid.html (Search for Centered Columns on page).
Also for the boxes I hope you are using Foundation's Block-Grid for your boxes - it will make your boxing a lot easier to do.
http://foundation.zurb.com/docs/components/block-grid.html
Can anyone please help?
I am trying to do the following layout in HTML and CSS. This image is just a rough representation of the general layout for a website.
The top bar (or header) will be e.g. light grey and the sidebar 1 will be the same colour. The sidebar 1 also has a rounded bottom left corner and the sidebar 2 has a rounded top right hand corner. The effect I’m trying to recreate is that the header will “flow” into the sidebar 1 and that the sidebar 2 will “flow” into the footer.
So far I have the boxes coded so that it seems that they are touching and I also have the rounded corners done. But what Ive been stuck with for the whole day now is how to do the colours so that it seems that the 1 is flowing into the next one. Here is an example of what I have so far (still very rough as I am just trying to block out the shapes etc.) hansmoolman.com
The relevant section in the website above is the one called "This is the main container" which is about half way down the page and contains the sidebar 1 (the one with the Twitter feed) and sidebar 2 (the one with all the Lorenm Ipsum stuff). The top bar will be the one with the logo and navigation stuff. The footer is not yet implemented.
Can anyone suggest how I can do this? I am trying to stay away from a background image that will represent this as the sidebar 1 and 2 should be able to grow dynamically and independently of one another should more content be added.
Or can this done with a background image/images?
Can anyone please help as all the solutions I have been working on has become very messy with boxes inside and on top of other boxes. It does not look good code wise and I am concerned that it might not display as intended on all devices.
If more clarity or code is needed on this question just let me know and I can provide both.
Thanks in advance
*Edit - this is a possible solution as suggested by flem
Build your layot with divs like this (spacing just for visibility):
You will also need an element behind each of the rounded corners with the opposite colour. (You only need to do one of them if you set your body background colour.)