I'm trying to make a two column layout with short lists of text on the left and photos on the right, like this...
LIST IMAGE
LIST IMAGE
LIST IMAGE
When viewed in a narrow browser window or on a mobile device, I want the images and lists to alternate, like so...
IMAGE
LIST
IMAGE
LIST
IMAGE
LIST
I figured I would just put the items in alternating order in the HTML and then float the images to the right at larger window sizes. This looks good for the mobile view, but the images line up with the headings in a weird way at larger browser window sizes, as you can see here:
http://allgoodeatslocal.com/links.html
I'm not sure how to do make this happen, other than having separate layouts for the two sizes...separate left (all the lists) and right (all the images) divs for full size viewing vs. alternating lists and images for small, mobile viewing.
Any better ideas?
You can use the media query, #media, to achieve this:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Set a media query for a smaller resolution/screen and set the width of the list and image div to 100% of the container and they should stack.
Related
I have images inside an html article that is set to columns using a fixed column-width attribute on containing div.
I've added srcset for reponsive images which works fine except it loads the largest image based on the width of the containing div not a smaller image based on the width of the columns.
In some cases the article is displayed without columns so I was hoping the same image srcset can cater for both situations. Is there any way to make srcset select the smaller sized image when its showing the content in fixed with columns?
For lack of responses, I came up with wrapping div around the images so the div scales to the column and srcset picks image is selected based on the wrapper rather than the full div. If anyone has a better solution please share.
Update: Doesn't work as srcset looks at the viewport not the wrapping div. One way to solve this might be to just use 30vw in sizes if its in multicolumn or calculate the number of columns using the width of containing div and use that value as the vw amount in sizes.
I have a website with a section with 3 columns, it's responsive and the columns switch from horizontal layout on desktop to being stacked vertically for mobile. This is fine but I have a problem where the columns become different heights from each other if the user changes the font size in their browser. Is there a way to force the column heights to remain even?
Here is the site:
http://www.1wevents.com/
It's the about us section. It's really, really annoying me. I guess I can add media queries to switch to vertical stacking earlier before the screen gets as small as mobile but is there a way to switch based on the font size in the browser?
Many thanks,
Tony
I am currently struggling at creating a website from a given design.
The design is created with InDesign and will be a one page website. The website has a width of 1280px.
The main problem is resizing, because the design has diffrent layers. Some images consume the whole width and some are centered with a given size and when I resize the browser the elements scale diffrently. Is it possible to put the whole page in a container and position every element absolute (as its done in the design) and then just resize the container. So the page would resize like a image. Are there some techniques in which I could read in?
Here the backlayer uses the whole width and the circle is centered with a given size. Now if I resize the window the beckground scales with a diffrent ratio then the circle.
Background-image now supports multiple images. You could try play around with that. But note browser support needs catching up.
EG
#example1
{
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
Depending on your layout, images etc, it may be easiest to just use an editor to combine into one image.
I am using foundation 5 to create a website.
And I would like for the top-bar that shows up for screen sizes to show on all screen sizes: small, medium, large, x-large. Currently it only show for small screen sizes.
I would like the attached sample of the top-nav to show up for all screen sizes.
So where in the CSS code do I need to make changes to make this happen?
If I understand right what you're looking for consists of expressing width of html elements with percentage instead of px or em.
Moreover it's reasonable to declare min-width and min-height in order to keep the contained elements in.
You probably have two bars (tab bar & top bar). As I understood you want to have the tab bar always visible. Your tab bar has a class:
show-for-small-only
You should remove the class and also remove the top bar.
Suppose I display thumbnails (~200px width each) in a web page. In a midsize screen (e.g. 15") I can display 5 thumbnails in a row.
Now what if I resize the browser window so that 5 thumbnails don't fit the page width ? I would like the number of thumbnails to be changed automatically to fit the page.
For example: suppose, 5 thumbnails with spaces between them take ~2000 px. Now I am resizing the window. When the page width becomes < 2000 px but > 1600 px. I would like to display 4 thumbnails in a row and so on.
What HTML/CSS markup should I use to achieve that behavior ?
I once made a fiddle to explain media queries to someone. You can use a similar design, although it's usually much simpler just to float:left or display:inline-block your elements and let the browser take care of the rest.
DEMO
One way is to use a responsive layout. Twitter Bootstrap provides the same by default.
Another way is by using #media tags. Refer http://www.w3schools.com/css/css_mediatypes.asp . Here, you will need to make a function like this:
Get the screen size using mediacheck and then set up thresholds using #media.
You can use the float property for this:
float: left;
Floating elements will wrap when they do not fit in the parent's width.
Example (try resizing the page)