Content does not fit viewport

HTML & CSS
42

Well, too tired to be sure of anything but here we go:

From what I can work out some of the code in the screen shots that you sent me are the same:
.map a
.Content #box4 img
a img (cannot understand what in border: medium none; medium is doing.

These two need changing altogether to:

.map .img-container 
    max-width:292px;   /* border (2x2px=4px) + padding (2x2px=4px) + max-width (292px) = total width (300px) */
    border:2px solid blue;
    background-color:#fff;  /* color of the 2px padded space */
    padding:2px;
    margin:0 auto;

.img-container img{  
position:static;
	width:auto;
	height:auto !important;
	display:block;

and these need deleting

#content #box4 img {
margin:0 auto 7px;
margin-bottom:7px;
border:1px double #6495ED;
border-width:2px;
padding:2px;
}


.map img {
    background-color:#fff;  /* color of the 2px padded space */
    border:2px solid blue;
    box-sizing:border-box;   /* for usability info, read: http://caniuse.com/#feat=css3-boxsizing */
    padding:2px;
}

Is that it?

43

Hi

I applied the changes to a file Amended.css and http://pintotours.net/Americas/DomRepublic/test3.html has problems with the images in this version

What did I do wrong?

44

Thanks, Iā€™ll take a look right away.

Please give me a few minutes to write down what I see and recommendā€¦

1 Like
45

Here we goā€¦ this is how it should look.

NEW.css (line 823)

.map .img-container {
    max-width:300px;
    background-color:#fff;
    border:2px double #6495ed;
    padding:2px;
    margin:0 auto;
}

NEW.css (line 593)

.img-container img {
    display:block;
    height:auto;
    width:100%;
}

NEW.css (line 624)

#content #box4 img {
/*    border: 2px double #6495ed;  /* DELETE ME */
/*    margin: 0 auto 7px;  /* DELETE ME */
/*    padding: 2px;  /* DELETE ME */
}

NEW.css (line 829)

.map img {
/*    background-color: #fff;  /* DELETE ME */
/*    border: 2px solid blue;  /* DELETE ME */
/*    box-sizing: border-box;  /* DELETE ME */
/*    padding: 2px;  /* DELETE ME */
}

NEW.css (line 1397)

#content #box4 img {
/*    text-align:center;  /* DELETE ME */
}

NEW.css (line 1242)

.img-container img {
/*    width: 100%;   /* see line 593 */ /* DELETE ME */
}

NEW.css (line 840)

#content #box4 img.booknow {
    padding: 0;    /* DELETE ME */
}

If something ā€œbreaksā€ as a result of deleting #content #box4 img {} it is probably for the better because you will have an opportunity to style it without using such a heavy handed styles.

Regarding the .booknow button, I did mention that you can add a minimum amount of space beside it at narrow widths, didnā€™t I?

.booknow {
    max-width:308px;
    padding:0 12px;  /* Add horizontal padding, if desired */
    margin:0 auto;
}

.booknow img {
    display:block;
    width:100%;
    height:auto;
    margin:0;
}

Remember, the .booknow button HTML should be

<div class="booknow">
    <img alt="Melia Guarantee" src="http://pintotours.net/Pinto/Logos/MeliaGuarantee.jpg" width="304" height="82">
</div>

Think optimistically and Test Thoroughly

Give this a go and let me know. please.

1 Like
46

Hi Thanks

Itā€™ll have to wait til tomorrow afternoon as I need a fresh head, and will be out all morning.

Thank you.

47

ronpat

You mention above NEW.css but I was working now in Amended.css. Does that mean that I should forget it?

test3.html is connected to Amended.css

48

Well, I didnā€™t know that the CSS had changed so I did not do a forced reload of my browser; therefore, my browser was still using NEW.css.

Unless there is something really special about the particular area we are focusing on in Amended.css, just make it look exactly as I suggest for NEW.css. Letā€™s just see what happens while I still have a sense of humor.

1 Like
49

I had mentioned it above. It included all the changes that I made following the screen shots that you sent. I was hoping that you would see what I may have missed.

the earlier version is fine for me, and there was no need to change, but as you took the trouble of sending me those screen shots i followed your instructions and made all the changes suggested-

The result was worse than before but possibly because I missed something

The page following those changes is at http://pintotours.net/Americas/DomRepublic/test3.html with the Amended.css

It would be interesting to see what went wrong there. There is very little wrong with it, I think.

Now, Iā€™m back and ready for bed.

Thanks

50

Ref: http://pintotours.net/Americas/DomRepublic/test3.html

The following changes to the ā€œAmended.cssā€ file should fix the map image and the ā€œbook nowā€ buttonā€¦ again.

They also delete several unnecessary or inappropriately applied rules. IF no problems are experienced, these changes should be implemented on all other similar pages.

These instructions begin with changes near the end of the css file. If the order of these instructions is followed, the line numbers will track when rules are changed or deleted.

Amended.css (line 1398) DELETE THIS RULE ENTIRELY

#content #box4 img {
    text-align: center;
}

Amended.css (line 1243) DELETE THIS RULE ENTIRELY

.img-container img {
    width: 100%;
}

Amended.css (line 1018) DELETE THIS RULE ENTIRELY

.ad img{
    border:blue 1px solid;
    text-align:center;
}

Amended.css (line 840) DELETE THIS ENTIRELY

#content #box4 img.booknow {
    padding:0;
}

Amended.css (line 837) DELETE THIS RULE ENTIRELY

#content #box4 .booknow img {
    margin:0;
}

Amended.css (line 820) CHANGES

.booknow {
    max-width:308px;
    padding:0 4%;  /* CHANGED from 12px to 4% *//* Adjust horizontal padding (min white space beside button) as desired */
    margin:0 auto;
}
.booknow img {
    display:block;  /* ADD ME */
    width:100%;
    height:auto;
}

Amended.css (line 812) CHANGES

.map .img-container 
    max-width:300px;    /* CHANGED from 292px to 300px */
    border:2px solid #6495ed;  /* CHANGED from "blue" to "#6495ed" */
    background-color:#fff;  /* color of the 2px padded space */
    padding:2px;
    margin:0 auto;
}

Amended.css (line 796) DELETE THIS RULE ENTIRELY

.ad img{
    border:none !important;
}

Amended.css (line 593) CHANGES

.img-container img {
    display: block;
/*    height: auto !important;   /* DELETE ME! */
/*    position: static;   /* DELETE ME! */
    width:100%;   /* CHANGED from "static" to "100%" */
    height:auto;   /* ADD ME! */
}

If any of these changes ā€œbreaksā€ something in the layout, please set up a test page where the problem can be seen and evaluated.

Thank you

1 Like
51

Hi ronpat

I made all the changes but the problems with the images continue, I looked only at PC size.

http://pintotours.net/Americas/DomRepublic/test3.html

52

qim,

The changes that I recommended have not been made. Maybe some have, but not all.

1 Like
53

All the changes that are in your last post #50 have been made.

Are you looking at the right page? http://pintotours.net/Americas/DomRepublic/test3.html

and the associated stylesheet? Amended.css?

54

The styles are not in the stylesheet.

Open the stylesheet in your favorite text editor.

Search for each of the selectors where styles were changed or added.

If the styles are present, you should find them listed beneath each selector.

1 Like
55

We must be talking of different things

Give me one example of something that was not done

Please, note that you should belooking at ā€¦/test3.html and NOT ā€¦/test.html

56

qim,

Did you validate the CSS sheet after making the changes? If punctuation is missing, the sheet may be ā€œbrokenā€.

http://pintotours.net/Americas/DomRepublic/test3.html

href=ā€œ/TEST2/Amended.cssā€>

1 Like
57

My apologies

I had a colon instead of a semi-colon in one of the lines.

There are further unconnected errors which I dinā€™t quite understand if they are important for the page in general

Back to the images: they still donā€™t do what theyā€™re supposed to do (rather like meā€¦)

58

You must have found and fixed one error in the CSS, but there are more.
Please look again using the validator.

It would be helpful to me if you would state where you find the errors.

59

I did but answered that in previous post

they have been there for a long time and in different pages and donā€™t affect the pages, though I would like to know how to fix them

In line 818 there is code that you just gave me. I see nothing wrong with it.

#818 Fixed

EDIT

I copied and pasted the code you gave me and in one set there was a missing curly bracket (Iā€™m not the only one, then!)

The full page looks godd

I am going to test it on mobiles if I can get hold of one

many thanks ronpat

60

Go to line 810 and add the open curly brace after the selector. Like this:

.map .img-container {

This oneā€™s on me. I saw it, fixed it, and did not document it so I posted the bad code.

That may not fix everything, but letā€™s see what it does.

1 Like
61

Please look at my last post