Everything looks fine on desktop/iPad, but look on iPhone and the "hero" image isn't sizing down. Not very good with responsive design to begin with, but it is driving me crazy. Here is link
I would really appreciate the help!! Thanks.
You have a set height on .da-slider. You will need to use media queries at the widths that you wish the height to change and explicitly state them.
Related
First of I would like to thank the codename one team for the support to get me through some of the tough tasks I have faced. Now that I have solid app that I am ready to submit to the app store, I would like to know bit more detail or any examples of how the capturing photo can be cropped.
If I want to capture an photo using the camera, I want to crop it to desired width and height of the photo. Is there any example to crop the image and show the cropping area while taking picture?
Please advise.
Thank you.
Thanks!
You can use Image newImage = myImage.fill(desiredWidth, desiredHeight); this will retain aspect ratio and crop the redundant areas.
I have made a responsive design on Wordpress and have adjusted everything. The whole layout and slideshows and plugins adjust to the window width, but I can't make the fonts responsive. I have tried many different options with percentages and also now with Vw and Vh. It does work but viewport width and height units have too big intervals and unfortunately when the window resizes the changes are very dramatic. I need some smooth way of reducing font size with the window size with little changes and also preferably minimum width to be set to some fixed unit. Please help me, is it possible with just CSS?
Sounds like you want to have pretty fine control over the font sizing.
There's a great article over on CSS-Tricks that outlines some of your options. Chris recommends using vmin to control the font-size. After experimenting I'd recommend using vmax because it will select the max of vw and vh, which kinda serves as the minimum font-size you mentioned.
Something like:
p {
font-size: 2vmax;
}
Also note: there's a bug in Chrome 20+/Safara 6+ that prevents the font from resizing itself according to the new viewport size.
If this isn't fine-grained enough unfortunately I think you're going to have to use js. I'd recommend going with one of these fine plugins:
SlabText
FitText
I'm designing a responsive site using edge reflow with the following rules for breakpoints:
<480px, <768, 1024>
I'm using a different background picture for each breakpoint of respective widths. However when I add them to Reflow with contain for scale-x it seems as if the image I created is not that size. Most of them were at least 200 pixels shorter than designed.
So my question is what dimensions should I use background images for each breakpoint as well as any other guidance for this using Reflow or suggestions of I'm doing something wrong.
Normally I'd use cover rather than contain but then the image scales and doesn't show what I need it to from device to device.
Thanks
Alright, try as I might, I cannot for the life of me get rid of this tiny little border around my buttons.
Edit: I should mention, in case I didn't make it clear, these are buttons with an image on them, set to flat with the button sized to the image.
Images below:
Number one, I can't for the life of me get these borders to GO AWAY. I've checked everything I can think of. They're:
flat
border 0
no margins
no padding
manually sized to the size of the image (75px)
in a table layout where the columns are all:
manually sized to the width of the image (75px)
borderless
Nothing seems to really "work" to get rid of these. If I size the columns down to be 74px instead of 75px, most of them go away, but a few remain. I've triple and quadruple checked the images, and they don't have anything that I can pick up on that should be causing this... no transparency around the borders, definitely no border that looks like that.
Which leads me to the second problem:
Settings button when dialog is small...
Settings button when dialog is stretched out.
Settings button is also in the same table layout panel.
I've checked all the settings on the table layout panel as well.. I can't find any padding or margin or anything settings that suggest this should be happening.
Does anyone have any experience with this? What am I missing..?
Simple solution: using directly a PictureBox as if it was a button. You can change your image on mouse over or mouse click.
Have you tried a Toolbar/strip/whatever it's called these days? Probably not going to help as I believe it pads on your behalf, but worth a shot.
In the end you can toss the buttons in the trash and write your own control. A single control that manages N buttons will work well here.
I don't understand your second problem. What's the problem? It'll be fixed if you roll your own control anyhow.
While not a fix for the spacing issue, as a workaround you can make that gray gradient currently "behind" the "tabs" and control panel image into a BackgroundImage for the TableLayoutPanel using BackgroundImageLayout of Stretch. While not fixing the spacing issue, it would make it unnoticeable.
Writing a winforms control has its challenges (experience speaking here). I would agree that that is whats needed however. Depending on your project you may consider using XAML and WPF. It provides that fine detail you seem to be looking for in you application.
There are ways to host XAML controls in a winform app, but if you went this route it would be best to create a native WPF application. The reverse is also true (winform controls in a WPF app).
Did you check if the image has transparent pixels around the graphic pixels you want?
May be a simple crop solution.
Is it possible to resize a silverlight/flash video player on the fly? I would like to create a video where I can drag the bottom left corner to resize the player (maintaining aspect ratio) or at least eliminate the possibility of doing so I could move on to other methods.
Thanks in advance...
EDIT: // forgot to mention
Sorry forgot to mention, this would also mean that the actual video itself resizing right?
Silverlight: Absolutely. Just set the the Stretch property to Uniform and then alter either the Width or Height as you resize.
Flash: Yes, you can alter the size of a flash object through JavaScript. Using a YUI, jQuery, or a Mootools JavaScript library, this should not be too difficult to prototype.
Here is a posts which explains how to resize flash from within your flash code.
Proportional resizing - here is an example of that as well using jQuery.
I'm not sure if the same is true for Silverlight browser objects, although I'd be surprised if you couldn't do the same.
This is a CSS solution for resizing videos on the fly.
The video can even resize itself according to the user settings if it is styled using EMs. This demo shows how a video resize itself according to the width of the user agent.
Here is an example of the silverlight scaling. This photo retouching and restoration site has a couple of silverlight controls that scale with browser resizing. There is quite a nice photo gallery that shows the photos before and after the retouch.
JWPlayer
As of version 5.3 they added a resize() method to the javascript API which allows you to resize a player - and all the control bar etc. will resize correctly too.
http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12540/javascript-api-reference
resize(width, height) Resizes the
player to the specified dimensions.
width:Number: the new overall width of
the player.
height:Number: the new
overall height of the player. Note: If
a controlbar or playlist is displayed
next to the video, the actual video is
of course smaller than the overall
player.