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.
Related
Im helping out in cleaning up and renovating a website for a friends organisation/art place.
We are working on Gallery of images of the last years of business.
See link to one of the gallerys-> http://www.stallbergsgruva.se/2018-2/
My problem is when I view the page on mobile (Android and Iphone) the Gallerys melt together and don't display in a nice way. For example it would be nice to have them all in one column or two but atlas separated and not smudged together as it is now.
Im looking for some CSS code that takes care of this. I have tried a bunch of different codes I found on similar issues but nothing affects my gallery. Im new to this code so many I'm missing something?
Im a beginner at code but can handle it if you add a more thorough description of what code and where to add it, etc.
Thank you in advance! // Erik
This can be done by defining width in media queries. I see you have defined
.gallery-width: calc((100% - 16px)/2
Change it to .gallery-width:100% at the resolutions at you which need this result. More info about media queries can be found at
Media Queries
Code Screenshot inside colsole
So in your case let us assume upto 600px you need this result this is how the media query will look like which needs to be added to your css file :
#media screen and (max-width: 600px) {
.wp-block-gallery .blocks-gallery-item{
width :100%;
}
}
I have been trying to learn how to design web pages using responsive web design. I have come across an interesting example that I do not understand:
http://www.sixty-nine.us/collections/general/
On this page on a desktop you will see gifs but when you shrink the browser enough you will see still images.
I thought this type of change in content was not possible with responsive web design because it can only control the style not the content. I was hoping someone could tell me what is actually happening here, and if my conception of the limitations of responsive web design to not change content is correct.
Any responsive design is based on #media CSS queries where you can choose which style should be applied on elements on which screen sizes (CSS approach)
Or using some JS code which monitors window width and shows/hides some elements or does what it should do. (JS approach)
They are actually looping videos and not gif. If the resolution is low the video is hidden, and jpg shown using display:none. Check the end of their stylesheet: http://cdn.shopify.com/s/files/1/0515/5693/t/2/assets/legend.css?7907595077267123575
They are using #media to control how it is shown on different devices. Read more about #media here:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Responsive web design is a wide variety of information on the Internet ,and the information is abstract,philosophical,and anecdotal.
Most of the time, in responsive mode we hide or display content.
For example: slideshow can be hidden in 480px less screens. for that we display a banner still banner with large text to explain the section / content.
So content can be changed with CSS. But the content does not change or added. Normally content is already loaded. But the showing will be changed with the responsiveness.
PS. your link does not work.
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.