preamble:
I am using a somewhat responsive theme (skeleton).
it changes the layout to a single column for small screen sizes,
my problem is:
my header image (that i inserted using the theme options in the admin panel) is not scaling when the screen is resized. it remains at 940x150 all the time.
when viewed on mobile this is causing a full sized header with content in a single column on the left, so im left with all kinds of whitespace.
I would like to: cause the image to scale down with the screen width
OR
replace the header image with one meant to fit smaller screen sizes.
the problem with option 2 is not all devices have the same screen width so it still needs to be scaleable to a point.
Ideally:
when above the below stated width, the image will scale to fit the screen between the 700-something (ipad landscape) and the 940 standard.
when below a certain screen width (say below tablet/ipad size, so 700-something max-width), the image is swapped for the smaller one, which then scales up or down between 300 and 700-something (just below the ipad size).
in this way the image would always be a decent size for the rendering of the site.
the problem with this particular image is the amount of whitespace (empty space) in the middle.
below a certain width, i would think the elements of the image would become artifacted and messy with so much space between them.
the site:
porthuronairportshuttle.com
Add this to your css:
img {
height: auto;
max-width: 100%;
}
I figured it out. It was actually a matter of removing the header I uploaded with theme options and uploading it with wp core functions. Then I moved the nav bar in the header.php and after some tweaks with margins and padding - poof!
Related
I'm trying to get my head around background images within responsive design. In this example page (http://test.scoe.net/rfox/usalResponsive6/indexTeacher5.html), I have a large photo with some text and a few buttons overlaying it. I've taken great care to position and size the text and buttons at specific window widths: full screen, 1024px, 768px, 640px, 480px and 320px. At those widths, the layout looks reasonably good. It's the in-between sizes where things go astray. Things look ok at the larger sizes, but once I drag my browser window smaller, around 760px, the image itself starts to scale and I get large gaps between it and the next item below it. Any suggestions on an approach to take to keep it looking decent across different widow sizes?
That's a good start.
The problem is that the space allotted for text becomes smaller and smaller as the viewport becomes smaller. In your example link, seeing the hero at under 480px, the text only has ~165px width to work with because you're using percentages and so it starts to look awkward.
I suggest to swap out the background image for another that allows for more space for the text container. The bg image functions as contextual information anyway, and your text is your true content.
Your text container really should be almost 100% for anything below 480px. For an example that may be similar to yours, see https://fi.google.com/signup how their initial paragraphs only occupy the left, but as your scale downward, the text container spans across.
In your code:
#media only screen and (max-width: 479px) {
.zTchrBlurb-xs visible-xs {
width: 90%;
}
}
I encountered this problem as well in the past,
you could change background position to cover and adjust accordingly, but personally I found this library here - invaluable.
https://johnpolacek.github.io/imagefill.js/
One approach I took in the past working with background images that needed to scale:
background-repeat: no-repeat;
background-position: 100%;
background-size: cover;
width: 100%;
height: 260px;
In my website, i have placed an image after the navigation bar. What i expect is the image re-size itself according to the size of the screen. Actually it does re-size but it leaves a blank space above the image when it re sizes which looks award.
The image fits exactly when the scrren resolution is above 1170px. But when i re-size it to lower resolutions it tends to introduce the blank space.
I have tried many element styles like margin-top: auto, margin-bottom:auto etc. But i couldn't hide that space dynamically. I am so new to the web site development. please help me to fix this issue.
change the style:
.carousel_gallery_item_inner { vertical-align:bottom;}
to:
.carousel_gallery_item_inner { vertical:align:top;}
So I've spotted a few sites lately where the background above the fold always perfectly crops to the viewport. For example - if you look at http://startbootstrap.com/templates/grayscale/ or http://simplesimple.co/currency/ on a mobile, tablet or desktop device the background image always fills the viewport even at different orientations.
It's not as simple as adding a max-width: 100% to the image as this would only fill horizontally. My first thoughts are that it is the art-direction use case, where breakpoints target different crops of the image. It seems like a lot of work to achieve this effect though so I wonder if I'm missing something.
With reference to http://startbootstrap.com/templates/grayscale/, the main banner image has been added as a background image and its background-size property has a value of cover which will stretch the image to fit the screen at any size.
Then there's tricks like setting the main section tag to have a display property set to table which allows its child div (containing title and sub title) to be vertically centered with display: table-cell and vertical-align: middle
Its built on twitter bootstraps framework which has grids and media queries built right in allowing for different images to be added via the background-image property for each screen size
On my website I have a slider of images across the top. This is the demo of the drupal theme (the company, not my website),
http://demo.drupalizing.com/?theme=bluemasters
All my pictures are different sizes or different kinds of shots. I don't know how to say it. I can re-size in any program. If I keep the aspect ratio, the 960px will be fine, but the bottom will be stretched.
How do I keep it all good and fit it in 960?
If not 960, what is a good number or other type of design?
Can I use CSS? Do I use an image program like Gimp, Paint.net, etc.?
As long as all your pictures are larger than 960px in width you can use HTML or CSS markup to resize the image to 960px. However, please remember that there is no way to display the an entire image say 4000x2000 in a 960px box without making it look small or choppy. In this case I would use an image editing program and cut out the main focus of the image and save it as a 960x300 (or whatever height) image.
From your link, the slider images are all 930px x 320px. You can use CSS to overcome this limitation, but your images might stretch out of proportion.
I would start with a an art work that is 930px x 320px, and just crop your photos according to this aspect ratio.
In this BlueMaster theme, the CSS already has a width set to 100% so no need to worry about scaling.
Online photo editor tool: http://pixlr.com/editor/
File -> New Image
Width -> 930
Height -> 320
Got sample set up here: http://codepen.io/rctneil/pen/myxDc and full page sample at: http://codepen.io/rctneil/full/myxDc
On that sample, I have a header with a .container within it, header is full width and .container is fixed to a particular width.
If you set the width to be 980 pixels or less then the page renders nicely on an iPad, if you set that width to be greater than 980 pixels then you start getting erroneous space on the right hand side.
I thought the default layout mode on iPad was that if an element is wider than the visual viewport, the visual viewport would zoom out until everything fitted and then allow the user to manually zoom into parts of the page. This is how it has worked in the past for me, I am sure.
Anyone know why the site is not auto zooming out to fit correctly?
If you set the height of the page large enough to require vertical scrolling, it will automatically shrink down the width. For example, set the width and height to 2000px on .container, and it shrinks the page appropriately. This probably isn't a viable solution in this circumstance, but it is a interesting observation of iPad viewport behavior.
I would recommend using iOS meta viewport tags. http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html