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;}
Related
My Woocommerce brand page header banner (Thumbnail) is not displayed in the original size, it is somewhat zoomed in. When I asked about that my theme support he wrote:
"That section has cover background image, so as per the nature it auto resize the image size to adjust and cover full container and also it is parallax, so it is better to have some more height in your image like 1920px X 1000px."
My image size was 1920x600.
When I added more height it does not fix this problem, because it again is somewhat zoomed in and loses quality, and also some part of image.
So - How can I make my Woocommerce brand page header image to be displayed in the real size, without this zooming effect? Without adjusting and covering full container? I should mention that this zooming effect is also seen in my main page header slider.
My image size would be 1920x600 and I wish that it is displayed in the original image size.
Thank you!
To fix this problem I added a CSS code:
.parallax-fix.page-title-shop {
background-size: 100% !important;
}
I have a website I am working on: http://digitaldemo.net/sadj/
If you look at it, the overall page background is the image with the cars. Then the header is
made up of that highway signs image and the corner banner overlays it.
The dilemma is that if you resize the browser window, the signs slide behind the corner banner.
I need them to stay in place.
Any ideas?
In template.css file (line 156) add the following code to .nav-signs { }
min-width: 1340px;
You can of course change the pixel value to whatever you feel is best.
Basically, this defines the minimum width for something, therefore cannot be made smaller. When you make your browser size smaller, it takes the min-width into account and won't move it anymore once it reaches 1340px.
Hope this helps.
Here's my dilemma, I've got a background image that has a bar on it. I fit the background image by using
body {
background-image: url("foo");
background-size: 100%;
}
I also have some html that I want to be inside that bar. The problem is, when the user resizes the browser window, the image adjusts to fit it (which is what I want it to do) but the html stays in the same spot, so it gets put outside the bar. Is there a way I can make my html resizable like the image so that it appears that the html is glued to the image? Can somebody give me a css clip for this?
The biggest problem with using images to guide your layouts is exemplified by this issue. Unfortunately, Harrison, you there is no solution that will enable you to do what you want across browsers or browser sizes without changing the image. If you can, please post a screenshot of what it is supposed to look like so that we can help you modify your background to improve its compatibility
In the meantime, I suggest that you remove the bar from the image and continue to use the image as your background. Then use a div with display: block; and use the bar as its background.
If you want the bar to be resizable, set its height and width to percentage amounts of the container height and width. Of course, when the window is reduced in size to a large extent, the HTML would spill out, there's no remedy for that.
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!
I have a background-image used to separate my page footer from the main content. It displays fine when viewed in a browser window wider than the supported min-width of the page. However, if the window is resized to be narrower the image is pushed to the right relative to the main body.
How it displays in wide browser windows:
How it displays in narrow browser windows:
Can I set the main body content not to push right up against the left-hand side of the window, but rather keep the 30 pixel margin when viewed in a narrow browser window?
The page is live here if the CSS will be helpful.
Yes, you should give the <body> a min-width. Just a little above 1000 works for me on your website, but I don't have an exact value. Probably the exact width of the ribbon.
-edit-
ribbon (1000px) + border (2 * 1px) = 1002px, that should do it.
The problem is that your #footerTop and #footer are too big and are responding to the window shrink. The way I would get around this is by adding the background to the #footerContainer instead. If you align it to the centre it will always work since #footerContainer does not have a fixed width.
This will also mean that you won't get the horizontal scroll bar when the browser window is resized to 999px wide. It all depends on how small you want the window to be able to go