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.
Related
The website is https://www.alisamesseroffphotography.com/ and the mobile site margins look awful. We use PhoPhoto in Wordpress, and cannot figure out how to add some margins.
Thanks so much!
What mobile site?
It's literally the same site.
You need to look at ditching or changing the theme.
As the other answer says, look at media queries : using a media query you can change how the page displays depending on the screen size it is viewed on. For instance, you could use this to add padding to the article-content class to force there to be white space around all the content on the page (but not the navigation or header image) which I think would solve your problem.
I think you should probably change the theme, something based on bootstrap would do a lot of the styling on a mobile device for you, and would make the navigation work better.
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.
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.
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'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.