I apologize if I sound vague/ abrupt.
The web page should be in tune with the browser size. I mean if the browser size is reduced/ shrunk, the full web page should also shrink and should be visible in the shrunk browser window. Is this possible ?
You will need to use media queries for a responsive layout in your css
Example:
#media screen and (max-width: 699px) and (min-width: 300px) {
<css template for 300 to 699 px width goes here>}
You can also use bootstrap (a responsive framework which has predefined classes for what you may need) for a faster implementation.
Related
I am currently designing the home page of my website and I want to make a responsive website with 5 hexagon-shaped images, 3 on top, 2 on the bottom. So I created a container with a width of 90% and a height of 65vh it responds nicely to different screen sizes. I then made my 5 hexagons and set up the dimensions for my images, it looks fine on the mobile devices in chrome developer tools but you can see my hexagons appear bigger on ipad sized devices and becomes too big of an issue to ignore with laptops and bigger. Thats not the issue as I can change that by using #media queries.
I then decided to check all the mobile devices dimensions before I do #media and it works great for devices whose height is greater than or equel to the device width but my bottom 2 hexagons leave the screen if my device width is greater than the height. I have tried different approaches and I'm encountering the same issue. Its like they adjust to the change in screen width but not height.
I found out the problem was I needed to design the website for landscape mode because obviously asmaller height and larger width is landscape, Ill throw up the media query in case anyone stumbles on it:
#media (max-width: 1024px) and (orientation: landscape)
i want prevent show my website in small screens same as mobile or tablet...
and i want to show message in this screen that open my site in large screen
How can I do this?
Set width and height using media queries like this
#media screen and (max-width:360px) and (max-height:520px){
body{
display:none
}
}
pen is here with resizable window
Use media queries:
//the css inside this block will only be applied to devices with less than 800px width
#media (max-width: 800px) {
//add css here to show the message to open the webpage on a device with a larger screen
}
You can learn more about media queries here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
As you have tagged wordpress: You can add custom css where you can configure your themes.
I created a simple page with Axure in 2 versions (basically 2 adaptive views: base and 768 and below). When I generate the html, it works fine and follows the adaptive views. But this seems to work only with javascript, is there a way to deal with/generate the adaptive views in css? This could help me later on integrating the Axure generated html and css into my responsive design based on bootstrap. Thank you.
Pretty sure you're asking about responsiveness according to screen size. Bootstrap is built around these principles and the responsiveness is done purely through CSS using #media queries. All CSS starts on the smallest possible screen and then you can adjust your CSS to change as the screen size gets larger by placing # media queries at the bottom of your stylesheet. They are as follows:
#media (min-width:768px) {
This is where your CSS for anything above 768px goes
}
#media (min-width:992px) {
This is where your CSS for anything above 992px goes
}
#media (min-width:1200px) {
This is where your CSS for anything above 1200px goes
}
You can also use max-width in media queries
I am trying to develop a website using bootstrap framework. I've successfully made a responsive carousel, which works fine. But when I change the size of browser to mobile screen the caption covers the image or covers most of the part of image. Although I'm beginner in CSS for mobile devices.Can anyone tell me how to reduce the size of caption text on mobile or tablet devices. Any help regarding this would be appreciated. I can't put the whole code here because it is quite big. So I'm posting the link to my website.
Here is the link to my site: link
You should read up on Media Queries. With Media Queries you can set specific styles for different window sizes and also for specific devices.
Let's say that you want to change the font-size of a CSS-rule when the width of the window is bigger than 320px and smaller than 400px. Then you can use a code snippet like this:
#media only screen
and (min-width : 320px)
and (max-width : 480px) {
.yourclass{font-size: 14px;}
}
I'm using a CSS Media Query to adjust the look of my page if it is very narrow. In my simplified example, if the page is less than 300px wide, I'll make the background blue.
#media all and (max-width: 300px) {
body{ background-color:blue;}
}
I recently discovered that if the user zooms (Ctrl+Scrollwheel or on Chrome Wrench>Zoom) that the max-width will still kick in at 300 actual pixels, not 300 zoomed pixels. This can break sites with more sophisticated layouts. Is there any way for the max-width media query to handle users with zoomed browsers?
I've experimented around and it seems that you can use media queries for a zoom, however in a Webkit browser you must define the viewport.