I recently downloaded Flexslider and managed to extend the images, and I have two things I need help with. The first thing is that I want the slider to be full width, and apparently it is being blocked from that in .container by overflow:hidden. If I remove that piece of code, everything expands and the website doesn't look right, but it removes the space between the slider and the screen. Does anyone know how I can fix that?
And my second question is how I make a small space between the slider images. Here is an example of how I want it: Example
Here are my codes:
jsfiddle
Adding margin:0px; on the body fixes the problem.
Related
I am currently using bootstrap and have a 3x3 grid of images. They are 200x200 images and I have looked EVERYWHERE to try and find a way to get an overlay to work on them. I only recently started writing code.
Serenbe.com has exactly what I am looking for about halfway down the page (also a 3x3 grid). The photo brightens, and a logo appears over it when you run your cursor over it. However, I would settle for text/links if a photo is not possible or too complicated. Right now absolutely nothing is working.
My images are arranged in a div within a container. The div takes up 6 columns. And the only styling I have applied is removing the padding so that it touches the edge of the page.
Any suggestions? I am 100% lost here, anything helps.
Thanks!
Have you heard of using hover with your css? :) it's pretty cool and I think that's what the site is using for its images.
An easy way to do what you want for beginners is I would have two pictures. One being the original and the second one with the effect you want. For serenbe it seems like they just added the logo on top using photoshop, then changed the opacity of the photo.
I would then wrap your img in a div and then do something like this in your css:
.customdiv{
height:200px;
width:200px;
background-image:url("imagelinkhere");
}
.customdiv:hover{
background-image:url("newimagehere");
opacity:.5;
}
What this does is change the content in your div to the new picture when you hover over the div, then apply the opacity on the image.
These are just a few tips to help you get started! Good luck
I had a programmer code a page for my site, but when we migrated the code to my site (on Shopify), some of the things stopped working. I've been able to fix almost everything, but the top banner is still giving me trouble.
I want it to fill the full browser width (like the other banner a bit further down the page) but it's being clipped to 970px wide. How can I fix this to make it responsive and fill the full browser width? I also want the whole page to be centered under the header.
And the code I'm using is here (I'm including the full code so I don't miss anything important): codepen.io/anon/pen/xZZwZN
When I run it in codepen it works, so I'm wondering if it's clipping it because of the page width coded into my Shopify theme. Any ideas on how to fix/override this on this page only?
Remove float : left from the css of .container .columns to center align.
After changing this, the page looks like below -
Hope that helps!
as i have seen in your site, you just have to remove float:left; from skeleton.css link for particular page
so go in this file and remove from .container .column, .container .columns this class and your site is ok :) If you can't find the class then note line no 26 in your css file.
I'm debugging a website for a code written by somebody else. Typically I used bootstrap for responsive rows and columns but I believe this site is built on zurb-foundation.
Here is the url of the page. (www.edcast.com/privacy)
screenshot for a a visual of what i mean.
http://imgur.com/WTGDQTK
I will play around with this, but having a second eye and some other input would be highly appreciated!
Update: So far I've tried changing "overflow: visible" to hidden and auto
I've also tried to apply a clear: both to a variety of different divs
If you take a look at the image I posted below, you can see that the div with the id image-top-div is pushing everything over. You will need to resize the image and play with the margin and padding. You can see me here in the gif taking out the margin-left which solves it.
Im a novice, apologies up front if this is unclear! I know what I want, but Im not sure how to get there or if its even possible with HTML/CSS. Ive been trying for a week with no luck.
The main content area is 955px wide. In the header, I have a logo in the upper right corner of this 955px width, but would like the logo to continue to the right, for computers that have a higher res. So the main header area is set to margin: 0 auto, and I can put a 1px wide sliver to repeat to the right which is ok, but I would prefer the image to continue, not just some boring gradient.
Is this possible?
I created this image to show what I mean but cant post it because i need 11 rep and have 10. ;)
In it, the logo has been split into Image 1 & 2, but of course, if its possible to overflow the centered 955px wide header, then it could be one image.
I can get it to work fine with two images, as long as the window width isnt altered - then you can see Image 2 moving and doesn't line up with Image 1.
Thank you for any help!
Thanks to both Tullo and COBOLdinosaur - I couldn't get your suggestions to work right (probably more to do with my lack of skills) but you guys helped me figure out the solution to my problem. Here's what I did:
Created the image in one piece, rather than two images. Floated right within a 955px wide main-header container div. And then I used negative margins to push the image further to the right. This seems to work great.
Thanks for the help!
Put the image in a div with a width of 100% and with a background color that matches up nicely with the image. Then for the CSS on the image remove the margin and include
clear:both; float:right;
I have a problem I haven't found an answer to in similar questions:
I have a site that dynamically resizes a horizontal scrolling image gallery and some text as you resize the browser. That part I have working OK, I just can't seem to get proper control of each respective element.
Take a look: http://john-godwin.co.uk/testsite
If you resize the browser, the large text overlaps the gallery before the gallery starts shrinking, and if you resize the browser small enough, the gallery eventually overlaps the footer as well.
Does anyone know what changes I need to make to the code to make everything stay within a boundary and resize respective of the other elements without encroaching into each elements space?
Thanks in advance.
The CSS can be found in http://john-godwin.co.uk/testsite/css/style.css
Remove z-index:500; in the .content class