Ok, so I am supposed to create an image gallery. The way I've envisioned it was for it to have a menu on the left, with the images appearing on the right, when selected from the menu. The menu would feature small thumbnails, and .... yeah, I wanted the site to feature a Responsive Web Design, where it would adjust itself should it be opened on a mobile device, but sadly I feel a tad overwhelmed by that.
What is my best way to approach this? I see some sites mention tips like
-make the mobile version first, and go from there
-be sure that the fonts change size depending on the screen size
And quite frankly, I don't even know how to make sure that my images are in the right size........ can anyone help? PLEASE!
Please check media query on CSS3 : http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You can set the size of the pictures with this... You can make a simple css rules for desktop and make mobile css rules for mobiles by using
CSS FILE:
// CSS RULES FOR DESKTOP
#media screen and (max-width: 300px) {// CSS RULES FOR MOBILE}
But I recommend you to include 2 css: one desktop and one mobile to be more clear.
Related
I have a WordPress website I'm coming to an end in finishing.
I want to remove the iPad format which is in the media queries (3 css files linked below) and I've toyed around with the pixels width here and there but everytime I remove or adjust them, I seem to just break the styling completely and not allow the website to continue the same layout from desktop.
3 CSS Files that are linked with all of this:
Layout.css - http://185.123.96.64/~curiouse/wp-content/themes/curiousegg/css/layout.css
Style.css - ( Inspect element, unable to post more than 3 links just yet)
Responsive.css - http://185.123.96.64/~curiouse/wp-content/themes/curiousegg/css/responsive.css
URL: (Self explanatory, only 2 links I can post unfortunately)
I'm happy with the responsive change for a mobile, however the iPad resolution (around 768px) I would happily do without.
I have spent a long time tweaking this through FTP so I've had to resort to some extra eyes to help look at this.
Any help would be appreciated.
Dev
The problem is that in a mobile first development, your base is the mobile css, then you add your rules for tablets, then on top of that your rules for desktop. So if you remove the tablet rules, you'll loose the style that desktop use as base.
Sadly there is no quick proper way to remove that breakpoint, though I guess you could do something dirty like setting your tablet media query to 767px and change your desktop media query to 768px to be sure it take over. Not ideal but it should work.
I have been trying to learn how to design web pages using responsive web design. I have come across an interesting example that I do not understand:
http://www.sixty-nine.us/collections/general/
On this page on a desktop you will see gifs but when you shrink the browser enough you will see still images.
I thought this type of change in content was not possible with responsive web design because it can only control the style not the content. I was hoping someone could tell me what is actually happening here, and if my conception of the limitations of responsive web design to not change content is correct.
Any responsive design is based on #media CSS queries where you can choose which style should be applied on elements on which screen sizes (CSS approach)
Or using some JS code which monitors window width and shows/hides some elements or does what it should do. (JS approach)
They are actually looping videos and not gif. If the resolution is low the video is hidden, and jpg shown using display:none. Check the end of their stylesheet: http://cdn.shopify.com/s/files/1/0515/5693/t/2/assets/legend.css?7907595077267123575
They are using #media to control how it is shown on different devices. Read more about #media here:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Responsive web design is a wide variety of information on the Internet ,and the information is abstract,philosophical,and anecdotal.
Most of the time, in responsive mode we hide or display content.
For example: slideshow can be hidden in 480px less screens. for that we display a banner still banner with large text to explain the section / content.
So content can be changed with CSS. But the content does not change or added. Normally content is already loaded. But the showing will be changed with the responsiveness.
PS. your link does not work.
I am almost done editing a new website template I bought. I really like the site, but I have just noticed it seems to have been made for only one resolution type. So, if I view it on a lower resolution screen... I can't see the whole site (can't even scroll down!). Then, on a high resolution screen, the site is so small I can barely read the text. Any suggestions would be really appreciated. Below is a link of the original template so you can better understand what I'm talking about this.
There is something called media query in css where you can change the styling of your site based on the device.
If you want certain css styles for big screens then do this
#media(min-width:1200px){
.yourClassName {
//css style
}
}
Similarly for small devices,
write a media query for smaller devices.
Thank you.
I have been given a task to convert an already hosted website into responsive. My working knowledge on CSS is below average.
In that quest, I heard about media queries. I looked for a solution, but what I got was more confusion. Media Queries? I tried responsinator.com and checked my website in that. Actually I don't know how to know whether a website is responsive or not.
My website fits the mobile screens. Header and footer automatically adjusts themselves.
There is a big slider and it just got cropped, but still loads images and works fine. If my website is responsive, how come the slider get cropped?
To make a responsive CSS, Will I have to make any changes to the values in my already existing CSS? Or will I have to just add my styles (without any edits) into the media queries given below.
#media(max-width:480px){
/*PUT YOUR CLASSES STYLES HERE*/
}
your media query defines which part of your css to look in, think of it like an if statement.
When it falls within a media query in your css file, your css has be defined to cater for that screen size,
Just because your page objects crop when you make the screen smaller does not make your site responsive,
best take your phone or tablet and visit your site, if the user interface is simple, easy and smooth, then you dont have to worry, but if you have a desktop styled site on a phone as wide as your numpad on the keyboard, you have some work to do.
It's quite difficult from my experience to "convert" a static website into a responsive one, especially if you do not have good CSS knowledge. Try to find elements with a fixed width and make them fluid by experimenting with max-width and procentual width values. Hope this helps.
Can you help me to understand the idea of changing the page style on resize it,as if we
use another style that suits with the size of the window and make you see all page content.
I see that in some website
like this page
I check it's css and script ,I think the idea is in css ,but I don't sure and I wana know
if there are any jquery effectiveness or what css properties effectiveness to do that.
Thanks for help
You can use CSS media screen. To do that just view these links:
http://www.w3schools.com/css/css_mediatypes.asp
What does #media screen and (max-width: 1024px) mean in CSS?
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
And also you can use twitter bootstrap.
You need so-called responsive theme (i.e., a theme that looks great on desktops, tablet devices, and mobile devices). Most of Bootstrap themes are responsive. See at Start Bootstrap.