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.
Related
I have an issue with the display of my homepage. It's my very first try in responsive design, and I guess it's not to bad so far. I uploaded the project here: https://adventuretrails.000webhostapp.com You should be able to access all necessary resources there, too.
Since this is a very early version there are a lot of mistakes involved, but I want you to focus on this particular one:
If you resize your browser window, you can see the style changes to a tablet version, if you shrink the window a bit more to a mobile version.
This is how I want my homepage to be displayed on every mobile device.
Since devices have different resolutions, it looks good whenever the mobile device has a pixel-ratio of 1, it looks okay if the pixel-ratio is 2 (iphone5), but everything above 2 is absolutely ugly.
I know I could set up css styles for every possible pixel-ratio, but this cannot be the final solution, right? For now the maximum customary device-pixel-ratio is something around 4, I guess. But in a couple years there will be a whole lot more.
So is there any way to let the browser know, to display my homepage with device-pixel ratio 1 ? Or a similar solution, which saves me the detour of defining css styles for every pixel ratio?
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.
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.
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.