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
Related
I have a css built in wordpress but it somehow is not mobile responsive. This is the site I am working on http://jcicitylady.org.hk/
Attached in the link is the style.css code.
http://paste.ubuntu.com/20875480/
Sorry for a bit long of the code. But I was like really have no idea how should I correct it to make the theme become mobile responsive. Therefore, I would like to know if anyone can help to teach me how to make it become mobile responsive?
Great thanks in advance.
It doesn't look like there is any use of #media queries which define how a tag should react depending on what the screen size is. This is ultimately what makes the page responsive.
This link contains more information on it.
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.
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.
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.
i'm using css to make a webpage and i have been stuck on this problem for a while. i have seen other website resize according to the resolution of someones monitor. i don't know much about css or any other things like it. can anyone tell me how i might accomplish this? my website is
http://ryanlaurence.com/
It's typically done with CSS, and called a liquid layout or fluid layout.
There are a lot of sites out there that describe various ways to do it.