Centering things for small devices

HTML & CSS
41

Well, this is a bit convoluted, but here we go…

The button “HOME” is surrounded by a box with a classname of “blank” and box “blank” has a gray backround image applied which is named blank.png but isn’t actually blank, it’s “#cccccc” gray which overrides the previously set white background-color.

newhtl.css (line 758)

.blank {
    background-image: url("/Pinto/images/blank.png");
}

<div class="blank">
    <ul>
        <li>
            <a class="popup look-inside" href="/">HOME</a>
        </li>
    </ul>
</div>
42

Silly me!

Thanks

43

(reminder: http://pintotours.net/XXX/newhtl.html)

A couple of recommendations unrelated to existing issues.

In the HTML, there are these boxes:

<div id="content-inner">
    <div id="box1">
    <div id="box4">

I recommend deleting or changing the following styles. The “look” should not change at all. The margins are just inappropriate.


newhtl.css (line 444)
#content-inner {
    max-width: 600px;
    overflow: hidden;  /* DELETE Me! Seems unnecessary. */
}

newhtl.css (line 449)
#content #box1 {
    background-color: #fffefc;
    border-bottom: 10px solid #594c26;
    margin-bottom: 10px;  /* DELETE Me! */
    margin-top: -10px;  /* DELETE Me! */
    padding: 0;
}

newhtl.css (line 525)
#content #box4 {
    background-color: #fffefc;
    height: auto;
    margin-top: 10px;  /* CHANGE to padding-top:10px to compensate for zapped margin-bottom in #box1 */
    padding-bottom: 30px;
}

.

Finally, it looks like there is a stray letter “b” just before the <!doctype html> tag.

44

hi ronpat

Thanks. I have a feeling that some of the code you’re suggesting that I should delete may be there for some reason, possibly to allow for Safari. I will look at it later and test all browsers with the changes.

Right now, I am trying to finish the content and come up against another problem: in pages like http://pintotours.net/Americas/DomRepublic/NicolasStoDom.html

I have a row of social media icons that connect to the sites via share42. I tried to place it in the new page’s left sidebar but the images don’t appear. I guess it may have to do with the width, and as this is controlled by a js.script, I am not sure whether to change a COPY or need to download a different script.

if you can help…

Thanks

45

I think my track record will survive testing.

Where are you trying to place the social media icons on the newhtl page? Fake a screen shot, if you can.

46

Hi

In the left sidebar, below where it is already the text “Share with your friends”. The code is already in place in both css and html but the icins don’t show…

47

I cannot help with the JS for the social icons. I don’t know if you need to download it afresh or if it can be copied and pasted.

48

Thanks. I’ll keep at it.

49

Hi ronpat

Ok, I’ve adsjusted the MQ to kick in at 827 instead of 800

It does not seem to make much difference to the rendering of the page and the horizontal scroll bar has gone in all major modern browsers. I thought you meant under XP only. I have not tested it under XP, yet

Could it be done the other way round: leave it at 800 and find the culprit?

50

If you are referring to your testing on Windows Safari, then they are needless.
At best useless clutter, at worse they might break things for browsers that others are actually using.

51

Hi Mittineague

Yes, the penny is finally dropping and I’m coming round to accept that’s a waste a time.

52

I’m glad you’re finally coming around :slight_smile: . Thank you.

53

I have one last stumbling block on this page http://pintotours.net/XXX/newhtl.html

The photos enlarge by clicking on them. However, I want to disable that at MQ 550px. I thought I had achieved that by placing

 #large2 {
display:none;
}

Unfortunately in small devices, only the first photo remains; the others disappear altogether!

I would appreciate your help on this, please

EDIT

I managed to solve it BUT a very large white dot appears over the first photo when you click on it… How can I get rid of that, please?

54

No, no. I clarified that I had mentioned WinXP solely for the sake of humor, not for testing purposes. You had made a remark about being 69 and not being able to stand gardening. Still using WinXP was my retort (maybe not so clever, though )

At the moment, the large images appear when clicked at all widths for me. I don’t see any white dots.

55

If you narrow the screen to the point where the photos no longer enlarge (MQ 550) the width and height of “0” that I gave them appear as a round large white dot, but only AFTER you click on it.

56

I see that now. I had to do a forced reload of the page to update my cache.

Tell me what you changed that causes the white dot, please.
EDIT: Never mind, I found it already.

OK, the white dot is the white border around the image. Assign #large2 {border:none} to hide it.

Seems like it would be better if the JS action that creates the larger image could be turned off at narrower widths. You may want to find out if that can be done instead.

57

That’s what I don’t know how to do it…

I’ve applied the border:none; and it looks ok now. Thanks

58

Hi

I have one other problem:

http://pintotours.net/XXX/newhtl.html

I’ve added a map to the bottom of the central column based on a script in the head.

I thought that by wrapping img-container around the map_canvas the map would shrink along with a diminishing screen. But it does not.

What should I do, please?

59

You should fix those goofy margins that I gave you earlier.

60

You can’t just wrap a wrapper around something that has fixed dimensions and expect it to shrink :smile:

You will need to use this method to scale the map while maintaining an aspect ratio.

    .mapwrap{margin:20px;}
    .map-inner{
    	padding-top:56.5%;
    	position:relative;
    }
    #map_canvas{
    	width:auto;
    	height:auto;
    	position:absolute!important;
    	top:0;
    	left:0;
    	right:0;
    	bottom:0;
    	border:5px double #594c26;

}

Html:

<div class="mapwrap">
		<div class="map-inner">
				<div id="map_canvas"></div>
		</div>
</div>