I want to wrap the list that appears on the home page:of the website Seminario Theologico Nicaragua so the images and text appear in two columns on a computer screen, but show as just a single column on a cell phone or other hand held device. I am working with WordPress, so any CSS will need to keep that in mind.
Try this method:-
If you use the column-width property, you won’t even need a media query.
Thanks. I’m confused by some of the text in this code:
article { -webkit-columns: 2 200px; -moz-columns: 2 200px; columns: 2 200px; }
What are “-webkit-, and -moz-”?
Those are browser prefixes. Some of the newer css properties are not fully supported by all browsers, so they need prefixes to make them work.
They are different versions of the same property for specific browsers. moz for Mozilla, webkit for Chrome, Android and Opera.
2 is the max number of columns and 200px is the width of column. This will fold to one column automatically when the screen can’t accommodate two 200px columns.
Those are browser prefixes (-moz- for Firefox and -webkit- for Safari and Chrome). They are put there to deal with versions of browsers that might not support columns yet. Often they are just a safe-guard, and in the end the property without the browser prefix will be used. For more information about which browser support what CSS properties you can check out http://caniuse.com.
Okay, so I took 1 minute too long to type that and @SamA74 beat me to it. 
Great!
So here is what I have so far:
`
-
Pastor
...`
As I add the missing photo and make the images the same height, I think this will work. Further comments?
Oh, and the link to the page is: Home Page
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.