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/
Related
I want to align centered an image and a short text, relative to viewport.
I would like to have the image followed by the text in the same line when it is space enough, like landscape view.
And when isn't enough space for both in the same line, I would like the text to slide under the image, and both to be still centered!
Any ideas will be welcomed.
Your request is the basic fundamental reason why the whole area of responsive web pages exist, and mobile first design methodologies ... this is a very very generic question, you need to be more specific ... are you trying to achieve this just with your own html and css ?? are you using any frame works ?? This is standard business as usual for frameworks like Bootstrap3.0 and jQuery. If you have not heard of them, then I would recommend stop trying to re-invent the wheel, get a crash course in Bootstrap3.0 (particularly in the scaffolding, this is how you achieve responsiveness, you can specify css settings for different screen sizes, what is the minimum width of an item, and what to do in the event that this minimum width is crossed ... slide one item under the other ... items can be divs, viewports, ANYTHING)
I'd like to create a responsive (or adaptive) site based on the wireframes here (also below). Essentially a 12 column grid with the first 1-2 filled with images and text in certain vertical areas.
How could I go about this? My thinking so far has been to create a dedicated left column, and then push everything else to the right of it. I feel as if this isn't semantic though, and am being forced to manually space items with absolute values.
The grid should work at both large (desktop) and small (mobile) sizes. Thanks for your help.
CSS - Floating two elements side by side
This conversation is similar to what I am trying to achieve. I have a % based layout and have an issue either the menu will get mixed in with the content or the content will fall below the menu when the page is shrunk or viewed on a mobile phone. I've spent several hours on this and cant figure out what I am doing incorrectly.
Problem child: https://www.tendercare-inc.com/new/
Update:
My biggest thing was getting something that worked well with Word Press as it uses very awkward controls and element names. I tried starting with _Underscores but it doesn't seem to have helped as much as I thought it would.
The basic problem is that you are specifying percentage based layouts for some elements like menu-sidebar and main-content but you're not consistent. The menu has a min-width of 200px. What do you want to happen when 200px is greater than 15%? Inside the menu you also have elements specified with exact pixel widths — the various cssmenu maker elements.
The site is very simple — basically a header, footer, side menu, and body. Yet you have two style sheets - one with over 800 lines — and a structure with site-content containing content-area containing site-main containing content-container. It's no wonder it's causing you grief. My advice would be to start over with a simple css framework (like bootstrap mentioned by #jaun above. Keep the structure of the html as simple as possible and avoid copy-paste design with things like menus. Also rather than trying things a seeing what's wrong, describe the behavior you want at various screen sizes and make it happen.
You should use bootstrap (getbootstrap.com) you can use col-md-6 clases to do that. Also mobile phone and tablet ajustment is supported
I have a secondary navigation at the top right corner of a site design. It is an awkward shape - 3 rectangles rotated - and all 3 need to be clickable.
It is a Twitter Bootstrap responsive site.
What is the best way to make them link? An image map seems too dated - chopping up 3 clickable images is awkward due to the angles involved. 3 Div's on top maybe? How can the DIV's keep correctly aligned with their targets whilst remaining responsive and working with Bootstrap?
UPDATE
The click areas need to stay in the top right over the image the whole time at every responsive width - including the mobile size.
You need to use css-transform to achieve what you are looking for.
Read the below for more details.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
I'm building a site with various background images with content laid on top of it. The way I have it now is not working because when I view the site on a mobile browser, some of the elements get pushed to the left leaving an ugly white space on the right.
This is because the elements that are being pushed aren't contained within a wrapper. However, I am not sure how to lay out all of the elements especially with the various background images that they need to be laid upon.
I've created a simple image of how the divs are laid out.
Note: All the text 100% width, etc is referring to the divs under the red transparent boxes (the content). The actual site can be viewed here.
Can someone help me figure out how I should build the HTML properly for the layout of this website? For example, should I split the top half and bottom half to #top and #bottom with a wrapper within each? I'm stuck as to how I should approach this.
It seems that all your widths are based on pixels when (for responsive results) should be percentages.
What is ruining your iPhone layout seems to be the pinboard ID at 1122px with a margin of 47px. That is much wider than the other divs above and below.
However, fixed layouts can be applicable to mobile. See -> fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/