I have been trying to figure it out for myself with no luck. I've been getting a lot of inspiration from online Korean retail shops. Examples:
http://ecdemo96168.cafe24.com/
http://ecdemo72744.cafe24.com/
I've looked at the CSS and see nothing. The sites looks exactly the same on desktops, phones, and tablets, landscape and portrait. Is Javascript being used somewhere?
What are the designers doing to get this to work correctly? I'm asking because my site currently needs an overhaul. I want to have the site look the same on all devices. I'm not interested in having a mobile version of my site.
If you could point me in the right direction I would be greatly appreciated. If I can't figure it out myself I would like to be able to convey to the coder/designer what exactly I need my site to do and how it should be coded.
If you don't want your site to change, set the min-width. For example, if your site is set at width:1024px; add min-width:1024px; and your site will look the same on all devices.
Include that in your wrapper div that holds all of your site together.
Related
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.
how to check whether the site is responsive or not,if We don't have all devices? Is there any perfect tool for that...we fallow responsinator.com or breakpoint of mozilla browser..
Just resize your browser and that will show you how your site looks like on smaller devices. If you want to test your site on specific platforms and browsers you do not have, i'd suggest something like browserstack.com
I would recommend you to read Ethan Marcotte's Responsive Web Design. In this book author explains everything about responsive web development.
http://www.amazon.com/Responsive-Design-Brief-People-Websites/dp/098444257X
https://www.responsinator.com/
use this link u can check responsive site
I have created a responsive website which has a mobile.css with multiple sizes to suit most common devices. What is the best practice from your experience to ensure that each size I have specified in my mobile.css will format the page correctly on all devices.
What I am wanting to achieve is a stretching of elements to fit the page when within the specified min/max limits specified in mobile.css. Are percentages the best practice to achieve this?
Let me know if you need any more information.
The best thing to do is test it on each device. You don't need to have every device that there is, you only need a device with a fixed screen size. Also try to get devices with different browsers, opera, chrome, IEmobile etc. Thats the safest.
There are websites out there that can emulate device sizes and display your website in those scales, But they do not emulate the mobile browsers. See if you can get a couple devices.(Ask friends and family or co workers.) And test it on each size you can.
Best of luck
#Media Queries are best practice in my experience refer to this documentation and there are some really nice examples
When testing FireFox has a default User Agent Plugin that can act as different Browsers, You can also get the Web developer Extension which has a resize menu to show you the responsive versions of your sites. Google Chrome has similar plugins.
Im having trouble making a wordpress site fit mobile and tablet devices without having to pinch touch it to fit the screen, any way of doing this? i did something once with some css coding in the custom css area but lost the codes and cant remember where i got them from, the site is http://www.meanteamtrainingformen.com
thanks
You have several options.
You could look at doing it yourself with media queries
You could use bootstrap 3
I am trying to make my website resize on handheld divices but form some reason its not responding to the stylesheet.
If you take a look here: responsive design link and put www.sofiamillares.com as the site test, the top lines get cut off and everything looks super big.
Can some one please enlighten me on why is it doing that and what would be the easiest way to fix it?
This is happening because your design is not completely fluid.
Only your container div will adjust with the width (a bit)
To fix this quickly, you could
give your divs percentage widths, so they scale with the screen resolution
float your square boxes at the bottom, so they will stack on smaller screens
consider using media queries or some js device detection to target mobile devices and send them a modified css stylesheet.
Get some ideas here: http://mediaqueri.es/
As Jason suggests, creating a mobile specific version of your site is usually the best solution. You can then test the user-agent string for phrases like "android" and "iphone" and re-direct the user to your mobile site. There are libraries available for JavaScript as well as many server-side programming environments (PHP, ASPX, etc) which do all sorts of browser detection for you.
When building a mobile site, you'll of course want to make the page lightweight so it'll load quickly over a mobile data connection, and format it appropriately for a smaller screen in portrait orientation.