I'm developing a responsive website using react. For styling I use CSS stylesheets. The responsive part is achieved in CSS using #media queries.
The problem is that when I use chrome, the elements appear bigger and the layout is as I would access the website from a smaller screen (tablet). What I understand is that chrome 'thinks' that the view port is smaller and responds to the media queries with the according information.
The problem appeared in the middle of the development process, after some time of working correctly.
What did I do wrong and how do I fix this?
Note: When opening the website in Firefox, everything works as it should. Also, when I open dev tools in chrome (Inspect F12) and 'toggle device toolbar' to true (Ctrl + Shift + M) the dimensions are set correctly. The problem appears only using 'regular chrome'.
if the elements are appearing bigger and you want to design according to the width of the device, use vw (viewWidth) to set the sizing of the element. Use vh to set sizes according to the height of the device.
You can set font size, height/width of the div element, etc. Use this inside media queries so that the size of the font or width doesn't get too small when using mobile phones.
Related
I have an html page built for work perfectly at the screen resolution 1024px x 705px, on iPad (it's and html that get's launched in another app).
I need to set-up a CSS or JS rule, to view it on desktop client (like chrome), like is on iPad and 1024px x 705px resolution.
Using the "Inspector" the site looks great, but i need a kind-a-like preset to view it at this resolution without opening it.
Setting via CSS height and width of body didn't work. The page is bootstrap made.
So I have a div that contains varying content depending on buttons that are clicked. Since I want this div to be contained within a segment of the page, I'm using the CSS vertical height (vh) property to set the div height. And currently I'm working on a form that I'm adjusting the div's vh value for so that the whole form is visible via scrolling.
However, I've noticed that the height that I'm ending up with is different between a desktop browser and a mobile browser (specifically Chrome Desktop and Safari Mobile at the moment). For some reason there's a lot more space being created in the desktop version than in the mobile version, and I figure this could be attributed to the much larger screen space on the monitor versus the tablet, but I thought that using CSS vh would account for this?
If not, how should I be adjusting div height to match across desktop and mobile?
try using a max-height for that div, or perhaps manually setting the height in your css and giving it an overflow: scroll
for mobile you will need a media query, in chrome console, there is a little button at the top left that looks like a phone. Click it and select the device you want to apply css to. From there you can fiddle around until you get what you like. Then in your css you do a media query like this
#media all and (max-width: 320px) {
...your css
}
We have developed a website using HTML, css and javascriipting. When we open it in Mozilla firefox then we get correct display for the webpage but when we open it in Chrome browser then we gets a gap between news and event box and the images which we put just below it.
Link for the website is here.
I am attaching some screen shots to get a clear picture for the issue.
I guess the problem is with the height of marquee tag. In firefox, it is auto adjusting the height while in chrome it is taking some other height.
One workaround will be to give Inline height to marquee .eg:- give height:164 px.
To my understanding (correct me if I am wrong) a modern Responsive website will change to fit the size and type of device you are using. Or this can be applied if the size of the window changes.
My question is why does my mobile phone display a Responsive site just like how a modern 1080p monitor would display it.
Essentially, my current monitor is running at 30" and is at a resolution of 768p. My phone also has a resolution of 768p.
Many responsive websites use media queries to display a CSS file based on the pixel width.
Wouldn't this be the same for both my monitor and phone?
MY QUESTION: How can I make a site responsive based on the screen size (in inches, etc) and not the screen resolution or number of pixels.
EDIT: My responsive design has 3 levels of CSS for different pixel widths (media-queries). When viewing on a monitor or smartphone, it displays the higher-most level (above 767p). How can I get my smartphone to display my lowest-level CSS (below 480p) even though it actually has more pixels.
I recently created a website using similar tech http://www.super-rod.tv/
It targets on both PC and mobile devices and will response to dynamic browser width resizing.
I used media query with max-width listing from higher-most to lower. For 1080P screens it has the best full screen display and for larger ones like 4K screen it will be centered with a texture background, on lower res like 768P it uses a smaller set of images and also be centered just like on a 4K screen.
If you are only targeting mobile devices, you can use device-width instead see ref here width versus device-width
To force using lowest CSS set you can either by using the max-width of 1000px (I don't think those who are still using 800x600 on PC would be your target?), this would pass out all desktops, or you can use browser UA to tell (defining for all IE,Safari,FF,Chrome,Opera etc., and the rest are mobiles).
Whatever screen is being used to view the page, I would like to show as many tiles as possible. Different scenarios include:
Mobile browswer (iPhone, Android)
iPad or Android Table or Kindle Fire
Narrow Browser window (safari, chrome, ie, firefox, operta, etc)
Full screen Browser window
One solution I thought of was to use 960.gs and adaptive.js ... however, when I set the size of the div, for example:
div class="tile grid_4"
I noticed that adaptive.js would resize the tile (becase the different .css files resize the columns)... However, I need to keep a fixed tile size (310px X 450px)....
Perhaps I need to dynamically rename the div class so that the # of columns x col width = 310px?
One site that does this is http://pinterest.com
And to see what each tile looks like, please check out http://jsfiddle.net/hagope/76jjp/
Have a look at CSS3 media queries. I recommend you read A List Apart's fantastic article on Responsive Web Design, which covers the subject and is a good starting point.
After you've got the basics sorted, you can target specific devices using the device-width query. To target high-density displays (e.g. the iPhone4's retina display) you can look into the device-pixel-ratio query.
Hope this helps.
Unless I'm misunderstanding what you want, this should be doable with only CSS. Have each tile styled as display: block (along with your fixed width and height), and then wrap each tile in a display: inline; float: left; container element. Add any more CSS you want for style, and it should work fine.
Here's an example: http://gpittarelli.com/so_examples/inline_tiles.htm