I am working as a graphic designer. They wanted me design some slider images on a page. But nobody knows the dimensions. I have seen that there are 4 different dimensions for an image when I inspect the page.
Large
Medium
Small
XSmall
So when you enter the website with a mobile phone Xsmall image appears..etc.
I have tried some ruler and responsive view extensions; but it didnt help me.
How can I find exact dimensions?
The exact steps might depend on what browser you are using. Here are some instructions for Chrome (they will be similar for other browsers):
Resize the window to get the image in the smallest dimensions.
Right click the image and "Inspect Element"
You will see a tab for "Computed". This indicates the computed CSS attributes for this image. From this view, you can read the height and width in pixels.
Resize your window and repeat this for each of the image sizes.
A more advanced approach: depending on how they implemented responsive web design, you may be able to view the CSS the page is loading, and look for #media queries which control the size of the image depending on the viewport of the browser. Read more about #media here.
Related
I have been looking for an adequate way to make my design responsive and easily used with mobile devices, within google app maker. Using 'auto' for the horizontal width or vertical height does help with this but the resizing of text even using the css font size by vw results in my content not being compatible with mobile devices and web. Any ideas how to make Google App Maker more 'mobile friendly' so to say, would be greatly appreciated.
The best option is to start with flexible layouts. Panels will adjust to the space available if you set fit to content or fill parent, and widgets will scale in the space available by setting minWidth, maxWidth, minHeight, and maxHeight.
After that, you can design CSS formats that tweak the layout for each screen size you target.
According to the Google App Maker guide for page styles:
To automatically adjust the layout for different screen sizes, use media queries in your global CSS. For an introduction to responsive design, see Responsive Web Design Basics. For an example, see Responsive layout grid.
I have developed a custom wordpress template based on theme twentythirteen.
The theme works fine on desktop, it's so so on tablets, and looks really wrong on smartphones.
The customized parts (the one that I made) resize correctly to take all the width possible, but the content structure that I kept of the original theme becomes more narrow that the screen. On smartphones the content width is like 20% of the available screen width.
How can I check what is wrong to fix it? I do suppose that it could be the other way around: the customizations stay too big, while the responsive layout resize itself correctly, with the result that the mobile browser scales everything to fit and I get my changes fine and the responsive part very small.
In that case, how could I fix the resize of my custom parts to fit nicely?
I looked for remote debugging and I solved my issue using this solution:
https://developers.google.com/chrome-developer-tools/docs/remote-debugging
I'm busy making an existing site responsive, currently I'm only making it responsive for one resolution so that my sales manager can "sell" the idea of a responsive site to the client. I've run into a problem, I've been assigned the screen size of 480px by 800px, the screen size of a Samsung Galaxy S III Mini.
When testing the responsive design on my computer using responsive design view in firefox or various other online tools, it works fine. However, when I test it on my phone, it displays the correct responsive design but it does not fill the width of the screen. In other words, the screen width is 480 pixels, but nothing on the page actually fills that 480px it only covers about half the screen width and leaves white space on the right.
This is the media query that I'm using:
#media only screen and (max-width : 480px),
only screen and (max-device-width : 480px){
Does this have something to do with pixel density or what is causing this problem?
Thanks in advance
Kind Regards
Willem
<meta name="viewport">
Have you looked into this tag? This changes the way the layout is zoomed/scaled on mobile browsers. You can look at what I found here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag . This example shows the problem you seem to be having. The "viewport" tag works in all mobile browsers, as far as I know, but you should check different browsers on the phone if this doesn't help you.
I had the same right-side white problem when all widths were working correctly, and solved it by turning off overflow in CSS as follows... This might hide actual content so you will have to test per your situation/layout...
html { overflow-x: hidden; }
I am trying to get a mobile site to behave. I am using the viewport meta tag to make the site fit all screens and be scalable. I have made all table and all images (over 200 px wide) 100% width, have set the viewport tag to:
content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=yes"
because I want it to be able to zoom in for those needing to read the text, yet have it open initially to fitting centered on the screen (any screen).
It almost fits on iphones and androids in portrait (testing on iphone 4 & 5 as well as galaxy iii android). But part of it is still not visible on the right? It fits fine on ipads or in landscape mode on phones. This is driving me insane, and must be something simple I am over looking. Live view is: password-reset.com/mobileusers/
I am using jquery colorbox on the page - could that be interfering? I thought colorbox was responsive?
Any help or suggestions will be gratefully accepted - what do I need to post of the code?
Your table that holds the More Info, Purchase and Testimonials has a width="340" on it. That is what is messing everything up.
I am creating my first responsive site, I am having trouble because when the iPhone is in portrait orientation, the text looks fine, but while turning to landscape, the text, images, etc all zoom in and get bigger to fit the screen. The font-size is in pixels so shouldn't it stay the same? How do I make it so it stays the same size and just adjusts the text wrap? An example of what Im trying to achieve would be this site on an iPhone. Thanks.
This sounds like the iOS orientation bug. There's a lot of incorrect advice out there to set a maximum scale in the viewport meta tag which seems to fix it but actually introduces a number of other issues. You might want to look at the workround to see if this does what you need.