Positioning and Resizing

HTML & CSS
1

http://www.neverupneverin.com

Hi Guys I am having a couple of problems with this website, I am currently doing a tutorial using Bootstrap and I am racking my brains as how to do the two following things:

  1. Moving the “Carousel arrows” when I re-size the window, they do not seem to stay with the images, they slide up the browser, if this makes sense?

  2. The images of websites I have created in the carousel won’t reduce in size when I reduce the window size, how do I do this?

Apologies if this seems simple, I just can’t seem to put the content in the correct divs for the two things to happen above. :sick:

Thanks in advance :slight_smile:

2

Firefox can’t seem to find that server.

3

I’m such an idiot, do apologise it’s

www.neverup-neverin.com

Sorry guys

4

HI,

You probably need something along these limes:


.browser img{max-width:100%;height:auto}

.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next {
margin-top: -15px;
margin-left:-15px;
}
5

Thats great for the browser class works exactly how I wanted it.

But the chevrons are still at the top of the window, so when i open the collapsable menu the chevrons are either side of the menu, when they should be lower down on the slideshow carousel.

Hope this makes sense, thanks for the help thus far.

6

Hi,

You need to add a positioning context for the arrows. It’s probaby best to do this at the smaller window size though otherwise it wil pull the arrow in to layout width.


@media screen and (max-width:768px){
#bannerCarousel{position:relative}
}

You still need those margin adjustments I gave you earlier for the arrows which will keep them in the black zone.

7

Thanks for that. I don’t know if I’ve changed anything but now when i view it on an iphone the menu doesn’t collapse? Is there any reason for this or have I changed the code?

8

The menu seems to be working. What’s the problem exactly ?

9

I thought I had created the page in such a way that with navbar-collapse the menu would collapse into a clickable toggle button, that upon pressing this button the menu items would appear and disappear upon clicking it?

10

That’s what seems to happen to me. Are you seeing something different?

At 768px width the navbar collapses to the hamburger icon and clicking the hamburger icon will open and close the menu. Is that not what you wanted?

11

When I reduce the window size on my computer, yes it changes to a hamburger icon, but when I view it on a iphone or tablet it doesn’t. I thought this is what the media queries max 768px would do- for it to turn into the hamburger icon on a phone or tablet, this is what i’m seeing on an iphone 5:

Do I have to have different code for the menu to collapse when viewing it on a phone or tablet?

12

Where’s your viewport meta tag?

Without the tag mobile browsers will not obey the media queries properly as they will just assume its 980px wide and scale to fit.

You must have this tag at the top of the head.


<meta name="viewport" content="width=device-width, initial-scale=1.0">
13

The tutorial didn’t make this clear. Really appreciate all your help on this, thankyou!!

14

Sorry just one more thing, I have moved the files to the correct address now of http://www.markjamesgolfcoaching.com now but there is no image inside the .jumbotron div, would this because the image is too big, will I have to create an image the correct size for this area?

Ignore This I found the problem