I am thinking to create my website in Wordpress. Previously, I did projects that were for other people but now I want to design my own website. I am currently focusing on the issues I have faced before and want not to repeat them this time.
The only issue is of responsiveness. I have faced issues for mobile device and later on have solved them after a great pain. But now as I am working fresh, I want to ask whether is it possible to make website responsive when it is under construction or only after the complete building of the website.
If there is a way to automatically make my website responsive then kindly discuss. If we can somehow make the website responsive at the time of creation then my work will be lessened and I can focus on other functionality of my website. If any one have any solution to my problem then kindly tell me.
You can get started with something like bootstrap or skeleton. These are (free :D), light templates and include responsiveness.
Skeleton: http://getskeleton.com/
Bootstrap: http://getbootstrap.com/
You can also use media queries if you want to make your site responsive yourself.
Media queries tutorial: https://css-tricks.com/logic-in-media-queries/
Good luck! :)
You can use a CSS framework such as Bootstrap to do this. That will automatically make your site responsive by default (in most cases, limitations might apply).
It means you have to build your website with Bootstrap though, so you have to do this while building the site, not afterwards.
The only way to make the website responsive is to buy a responsive theme. But that will not be 100% successful considering them customization. If you are thinking of making the website responsive plan it well and the build from the beginning. If the HTML is properly structured then the working time and issue fixing will be easier and less time consuming. If you need more details please comment
I known that this has an answer but still I thought I can give a contribution.
In the first place you talked of wordpress. Since you are going to making your website in wordpress then it is recommendable to choose a responsive theme for your website which is going to significantly reduce your overhead.
Also you can use media queries to make a website responsive like look at code below
/* ----------- Non-Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}
You have to give screen size for various devices like laptops, ipads etc. There is a whole article here https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Apart from media queries you can use framework like bootstrap , skleton which will greatly reduce your overhead. All you have to do is to add its files and use the classes of framework which already has properties associated with them.
Related
I know I know it is probably only a workaround but I am only a Wordpress amateur and currently need a quick solution, even if a dirty one...
My Wordpress site has a side bar. Unfortunately I have a problem where on android (and probably IOS as well - didn't check) the side bar takes almost half the width of the mobile screen, and in windows, on a pc\laptop screen it looks ok.
So, I narrowed in the custom CSS the sidebar width and now I've got the opposite problem. Looks find on mobile and bad on the PC monitor.
I am using Helium theme.
This is the css value I use to set the sidebar width:
width: calc(100% - 100px);
I checked "Browser and Operating System Finder" plugin but failed to understand how to utilize if for my needs.
I guess the pros have better solution, but even a quick and dirty will be welcomed for now.
An example of the sidebar(filled with button widgets) overlapping the background items on PC screen:
Thank you.
You shouldn't be looking at determining what to display based on device, but rather on characteristics, and for this I would recommend css media queries https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
This allows you to change css based on size and other factors e.g
#media (min-width: 300px) and (max-width:480px) {
/* styles here */
}
You can even add things such as orientation
#media (orientation: landscape) { ... }
The reason this is better than just looking for a specific device e.g iphone is that if Apple released a new iPhone that had an even bigger screen, your standard stylesheet might work, or it might not. Media queries will allow you greater flexibility going forward.
I am getting into web development, and am having a bit trouble with CSS. I am more of a C++/PHP guy, so this is a different world to me and it boggles my mind. My only problem with CSS is positioning objects. That is literally all I have problems with. I can easily reference complicated selectors, and lookup how to manipulate certain attributes....but positioning stops me dead in my tracks.
This is less of a question, and more of a call out to someone who knows what they doing. I am completely in love with the concept of responsive web design. I, however, have never dove into this personally (I use wordpress and responsive themes to handle visuals---while I write the content and plugins i need). What exactly is involved in responsive web design? I heard of grid systems alot, and it makes sense in my head. Is a grid system what makes a page layout change? How? Do i code my own or use a existing system?
What about media queries? I see examples of this, and its amazing to me (i understand zero of it lol). With media queries it seems like you would easily be able to create a responsive site...but where does the grid system come into play?
I personally use media queries and would recommend it for you also, here are some tutorials that I used when I was first learning responsive web design:
https://www.youtube.com/watch?v=BIz02qY5BRA
https://www.youtube.com/watch?v=fA1NW-T1QXc
Good luck!
If you are new into this the best option is to try to use one of the frameworks around to try to achieve resposiveness. I will suggest have a look to Bootstrap or Foundation
But to answer your question you usually use media tags in your CSS so you apply different styles based on the device being used to display the page. For example you can apply certain positions and sizes to your elements based on the screen width:
#media (min-width: 996px) {
#yourelement {
margin-left: 10px
}
}
One resource I use on my website is Bootstrap. Bootstrap divides the page into 12 sections. For each <div> element, you can choose something similar to .col-md-12. This will tell the element to take up the entire width of the screen.
If you would like to make a page responsive to screen size, you would type something similar to <div class="col-xs-12 col-sm-6 col-md-3> This is saying that on phones, xs, there will be one column. On tablets, sm, there will be two columns. On a standard screen and up, md, you will see 4 columns. You may also use lg for large screens.
Edit: To add to your second question about media queries, Bootstrap is based off of media queries. The follow shows what each size refers to:
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
For more information about this, here's a link to Bootstraps CSS section that describes it.
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.
Im working on a website that im trying to make responsive.
So far , it works on desktop and mobiles phones (iphone , galaxy s4..ect)
Im having a hard time trying to make the website, when its on tablets (ipad , nexus 7 ..) look like its on a mobile phone.
My website is here - http://mk18.web44.net/index2.php
you can use http://quirktools.com/screenfly/ to see what I mean. Change the setting to a mobile phone like iphone. Thats what I want it to look like on an ipad.
You can look through the css - http://mk18.web44.net/css/styles.css
Thanks
For what I've seen, it seems to me that you are trying a bit too hard.
In order to make it like for iphones, you have to make the media query of #media(max-width: 768px) with the same instructions as the #media(max-width: 360px).
If that's what you want, my advice is to remove the #media(max-width: 360px) completely and just leave the #media(max-width: 768px) - the css instructions within will only be applied for devices smaller than 768px in width (this includes iphones, and other phones).
Also, you should do some clean up. Css code will be parsed from top to bottom, so css instructions without any media query (the #media bit) will always be applied in all devices, until there is an override. One can create as many #media queries as needed, but that doesn't mean you should.
With the right css foundation, you can accomodate most devices without media queries, using them only to reorganize content and user interface just enough so that it remains usable.
Hope it helps.
I'm designing a website using media queries and have everything looking good on desktop and my iPad...but my phone is a different story. The pixel dimensions are 1024x768 because it is a newer smart phone, so it is trying to display it like my tablet. How can I use a media query to specify that my phone at 1024x768 should display differently than my iPad? Thanks for any help.
Here's what I've been working with to start:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
Initial thoughts
Some additional information on the exact layout problem on your phone would be helpful. Also, do make sure you are using the proper <meta> tag (as #Lokase suggested). A good run down can be found here.
Two possible solutions
Usemin-height and max-height in combination with the
width media queries you are already using to attempt to target
your phone.
If that is not an option, you can use javascript to target your
phone by attempting to detect the user agent, but this can be hit or
miss.
A word of Warning
With all that said trying to design for specific viewports will lead to endless frustration. A more time intensive you may need to step back and rethink your layout, and how you are using media queries. This can be a pain to implement, but you will thank yourself in the long run. Just consider the number of high resolution android phones in the market now, and how many are going to be shipping soon.