CSS Help , images not scaling down properly

HTML & CSS
21

Thanks Paul,

Which Page/Image and in mobile view? What mobile are you using? Thanks

22

It’s looking ok on the iphone now. :smile:

There’s still the scrollbar on the desktop though.

23

Great :slight_smile: thanks for your help paul! Any other design tips to make the website look nicer before I go live? :slight_smile:

24

One last thing.

In desktop view you can still see the sidecar Nav black at the right hand side of the page. Is there any way of making this white without effecting the mobile view? Thanks

25

Sidecar ?

I’m not seeing any black to the right? (or I’m looking in the wrong place)

26

On the right of my screen when it scrolls there is black

27

I’m not seeing any black unless you mean at desktop widths where your facebook sticks out of the 16.6% column as the buttons are a fixed width and at smaller screen widths there is not enough room so a horizontal scrolbar appears on the viewport. If you then scroll right with the horizontal scrollbar you will see black because that is content outside the layout.

You need to move the stuff in the column before the column gets too small.

I don’t think this is what you are talking about though:)

28

ArrrgHHH! :slight_smile: Checked it on my mates macbook and it looked terrible still!?? Black menu bar on the right hand side and all off centre! Whats going on now??

29

I still can’t see a black menu bar so will need a screenshot.:slight_smile:

You seem to have disabled the mobile styles now though as its not displaying on mobile any more. Where are your media queries or are you doing some sort of mobile detection. There’s so much to look through for such a small page that it’s a bit of a nightmare to debug.

30

Thanks for your help. I have managed to get it looking slightly better now through some media queries. A couple of things still that are causing a bit of a headache. On some different size screens the header image appears far to large. Also the Orange and Blue box either side of the grey one on the main page appear out of place on different size screens. Again is the only way to fix this through more media queries or am I missing something? :slight_smile:

31

Ok i think i’ve solved the banner issue. So its just those 2 pictures

32

It depends what you mean by out of place? If the don’t fit in the available space then adjust them with media queries to look better.

It looks as though you should remove the width and margins on the coming soon box and do something like this.

@media screen and (max-width:640px){
#block-yui_3_17_2_41_1431887070393_10126 {
		width:auto!important;
	  margin: 0 30px 0 15px!important;
	}
}

The use of too many !importants in your code make it hard to change styles.

33

sorry I mean on different screen sizes they jump up and down on the page

34

Dont worry fixed it! :slight_smile:

35

ONE last thing before its finally OK. I think! The search buttons on the Home and About page. They appear to large on certain screen sizes? Why is this? CSS fix? Thanks

36

Sorry to be vague again but I couldn’t see search buttons. Did you mean the search input on the about page?

37

Hi yes search inputs sorry

38

I don’t know if this is what you mean but the search box doesn’t match the blue column underneath because you have applied 10px padding to the blue column container.

You would need to add a 10px offset to the search input container if you want it to match.

e.g.

.sqs-search-ui-button-wrapper {
    margin: 0 10px 0 0;
}

The blue header does not match the width of the layout because you have applied 17px left and right padding to the parent. Of course that may be how you wanted it to look :smile:

39

Still not working.
I think its something to do with this: .sqs-search-ui-button-wrapper .search-input {
padding:5px 0px 5px 45px!important;}

When you get rid of the 45px it works but the search picture etc. is in the wrong place.

40

Nope, still no idea :frowning: been spending hours trying to fix this and just cant get it to work!