Content does not fit viewport

HTML & CSS
1

Hi

problems again, now in http://pintotours.net/Americas/DomRepublic/test.php

This page is very similar to, say, http://pintotours.net/Asia/Japan/CrowneNagasaki.html . They have different but very similar stylesheets. I tried to copy across some of the code for img-container but it makes the rendering even worse.

The header and nav go one way, the rest the other and do not fit the screen

Everything starts overflowing from around 350px

The problem is with small mobile screens. I’ll never be able to understand responsive design!

Help appreciated as always.

EDIT

Sorry! I made a couple of changes since first posting but it still does not work. At low screen width there seems to be an offset with the top going to the left

NOTE

I don’t know if it makes any difference but the page should be .php and not .html

I have changed it. See above

2

Hi, not looked at your code, but you said the media query starts at 350px? Generally speaking there’ll be no initial media query declaration. So there is normally css prior to any media query and this css serves the viewports prior to your first query!

if your code is in the above manner, try

body{
margin:0px;
padding:0px;
}
3

Hi

I have several break-points, But the problem seems to start at around 350px, which matches the 2 small mobiles that I tested

I do start the stylesheet setting everything to “0” as you suggested.

thanks

NOTE

I don’t know if it makes any difference but the page should be .php and not .html

I have changed it. See above

4

I do not know what you are describing.

We’ve seen that problem before.

In this case, assign a classname to the button image, take it out of the paragraph tags, and add a few of lines of CSS to address that classname.

Please note: this is band-aid code and should NOT be repeated on any other page. Fixing the misplaced padding-left and margins in the CSS and media queries would be the better route to take.

The restructured HTML looks like this: (all I did was take the button image out of the paragragh tags and give the img a classname.)

<div class="ad">
    <a href="/request/index.php?id=ParadisusPalmaReal" target="_blank">
        <p style="font-size: 12pt; font-family: Tahoma; color:black; text-align:center;">
            Paradisus Resorts are part of the major hotel group Melia Hotels International.<br>
            <b>They guarantee the lowest Internet rates if booked in their website.</b><br><br>
            Look for yourself.
        </p>
        <img class="booknow" src="http://pintotours.net/Pinto/Logos/MeliaGuarantee.jpg" alt="Melia Guarantee"><br><br>
        <p>
            Click on the images to enter the hotel's own website.
        </p>
        <img id="ttnimage" src="http://pintotours.net/Pinto/Logos/ParadisusLogo.jpg" width="140" height="93" alt="Paradisus Palma Real" />
    </a>
</div>

Then I added some CSS:

.booknow {
    width:100%;
    max-width:304px;
    height:auto;
}
#content #box4 img.booknow {
    padding:0;
}

That should stop the horizontal scrollbar.

If you want some white space beside the button at narrow widths, put a container around the button image and add horizontal padding to the container…
<div><img class="booknow...></div>

I just noticed that these ad anchors are not set to display:block; You should probably do that.
(line 1024)

.ad a {
    text-decoration:none;
    display:block;
}

Personally, clicking white space and finding out that it’s an achor makes me crazy, but that’s how you other pages were set up; plus, if you are going to include blocks inside the anchor, it should be set to display:block or inline-block.

 

To fix the map image above this ad, copy the relevant HTML and CSS from
http://pintotours.net/Asia/Japan/IbisKyotoStation.html.
I have not tested to see if there is more junk code in this CSS that affects the map. Don’t forget the IE8 style to remove the blue border from the anchor.

1 Like
5

if above is no joy try adding

* {
 box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

Padding is probably being added to elements that are 100% and pushing them beyond the intended width

6

Hi ronpat

many thank coming to the rescue.

I am at this moment going through the earlier thread Same code? different results! - #12 by qim to see if that helps. Wil it?

Next, I will have a go at your band-aid.

It’s all a bit confusing, but at least in the morning it is easier to think…

Thanks

7

Hi ronpat

I started earlythis morning trying to decipher and change the code in accordance with the earlier thread, and before applying the changes you suggested this morning to the file in http://pintotours.net/Americas/DomRepublic/test.html (back as a html file)

I used http://pintotours.net/TEST/test.html

The main problem is in very small mobiles. It appears that #box1 (the image) is overflowing and making everything below it larger than the header and navbar.

The image is wrapped in a img-container div and the only code for it is

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

I think I followed your earlier instructions for a very similar stylesheet but it gets a bit confusing.

If you have a chance, please look at this page and tell me if I should forget it and go for the band-aid changes you suggested this morning.

Sorry…

8

Most of the information in that thread is good. The code in the CSS that was deleted because it interfered with the map container or was otherwise useless is valid and should be applied to other similar pages and I believe that the rationale was explained as I went along.

I made a mistake while trying to get rid of the double blue boxes is IE8, but corrected my error in message 63 or thereabouts. The HTML and CSS for the map that was finally used in the KyotoStation page is good.

An additional area that should be transferred to all other similar pages involves fixing the vertical margins associated with box1 and box2, the “wow” image as I call it. It would be a good, logical thing for the center column boxes on all similar pages to use the same code and behave the same way.

If the undesirable CSS has been deleted, it should work.

EDIT: The band-aid will fix the horizontal scroll issue. For the map box to work properly, I believe some CSS had to be removed from one or more media queries. It’s shown on the page you referred to.

1 Like
9

The top image is resizing as it should. The problem is caused by the new ad box and is fixed by the band-aid changes which address the contents of the ad box.

10

Hi

It’s only 10am and I’m already totally confused!!!

Anyway, I tried the band-aid method. It worked fine except that the map was too close to the edges. I tried to apply on top the code from the Kyoto page, as you requested, and I ended up with the dreaded double border.

So, I compared further the 2 stylesheets, added and replaced a few more bits & pieces and the result is not perfect but acceptable: the map could do with a bit more sideways margins and the whole page moves a little sideways in small devices (Webmaster Tools will flag it soon…)

So the latest which I am going to publish because it is acceptable is http://pintotours.net/Americas/DomRepublic/test2.html

If you’re still up…

11

The band-aid is for the button that was causing the horizontal scrollbars.

The code for the map box should have come from the Kyoto page. Maybe you removed my comments from the the CSS. Please look at the last item in this post for a comment about that white space. I used 4%, you can increase that or even change it to pixels if you prefer.

Same code? different results! - #38 by ronpat

I can reduce Firefox to a width of 284px and everything fits… no scrollbars

You will have to show me a screenshot of the page having moved a little sideways in a small device.

12

I believe I sorted that out, right?

That’s what I did, but as I had the double border I looked for answers in the previous thread and made what I think were the suggested adjustments. Did I miss something?

Well, that’s not really possible. I borrowed a mobile (I do not possess one! Well, I do have somethting without a screen that dates back to last century, just for emergencies…) and it is possible to move the page a minimum amount from side to side.

I had this problem with the “Public holidays” pages and WM flagged them as errors. The page is fine to publish, but if you know of any problems that I overlooked and how to solve the movement, I would be very grateful.

13

I don’t see a problem in Firefox.

The code is a bit messed up but there is no double border. But then again, the double border is eliminated in the IE conditional code. Looks like you doubled up the good code with the bad rather than deleting the unnecessary/conflicting CSS.

I don’t see any movement. No scrollbars down to 284px. (Firefox’s minimum width). Nothing moves side to side. It’s not impossible, but I don’t see it.

1 Like
14

Thanks ronpat

I’m going to change the pages already published and declare it as good enough

Over & out!

many thanks

15

The code is working well in the Kyoto page.

but not here…

1 Like
16

Hi ronpat

The code for the map in the Kyoto page is this:

.map a {
    display:block;
    padding:0 4%;   /* minimum white space beside image.  these right and left paddings are a guess.  change to suit. */
    
}
.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;
}

It creates a double border in the current test page. I looked at the earlier thread and used some of the suggestions there, to become

.map a {
    display:block;
    padding:0 4%;   /* minimum white space beside image.  these right and left paddings are a guess.  change to suit. */
    
}
.map .img-container {
    max-width:300px;   /* border (2x2px=4px) + padding (2x2px=4px) + max-width (292px) = total width (300px) */
   
 
    margin:0 auto;
}
.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;
}

which improves things with just the small problems that I mentioned.

You can see the page with the Kyoto code here:

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

EDIT

I tested in IE8 the page that is now published and the blue bottom image seems to be rather deformed.
http://pintotours.net/Americas/DomRepublic/test3.html

As I published a couple of pages, it is best that any changes be made to the working stylesheet which at the moment is in TEST2/NEW.css

17

Yes, it is. I made a mistake that only IE8 was honest enough to show. I’ll get back to you in a little bit. This will take a long few minutes.

1 Like
19

I’m not sure if you found the answer to that. If the post is within the edit window, you can use the bin icon next to the “reply” button to delete it.

20

Hi TechnoBear

I have seen other using a line striking through some text they had written, rather than deleting it.

21

Ah, I get your point. Not like that ^ but like this.

<s>like this</s>