Webpage view on mobile - only top half displays correctly?
Here is the page I'm working on:
https://glutenfreetravelsite.com/mobile/Rhode-Island/Providence/gluten-free-restaurant/Kabob-and-Curry/3795.php
Looks great in a web browser and on mobile, the first part of the page is fine. But when scrolling down to the second review, the review content doesn't fit into the width of the screen.
I've looked at the html and am comparing the html for the first review and for the second review. I can't figure out why the second review isn't displaying correctly.
I understand the html is old and not up to current standards. However, my objective at this point is to get it displaying correctly with the html that's currently there. I'm sure there must be a , , or tag out of place somewhere but can't figure it out. Can anyone see which tags I need to fix?
I didn't include the source code for the page as I assume it would be easier to view it with a right click on that page.
Any help would be much appreciated!
Thanks,
Tim
html mobile
asked Nov 22 '18 at 2:19
Tim MTim M
728
add a comment |
Here is the page I'm working on:
https://glutenfreetravelsite.com/mobile/Rhode-Island/Providence/gluten-free-restaurant/Kabob-and-Curry/3795.php
Looks great in a web browser and on mobile, the first part of the page is fine. But when scrolling down to the second review, the review content doesn't fit into the width of the screen.
I've looked at the html and am comparing the html for the first review and for the second review. I can't figure out why the second review isn't displaying correctly.
I understand the html is old and not up to current standards. However, my objective at this point is to get it displaying correctly with the html that's currently there. I'm sure there must be a , , or tag out of place somewhere but can't figure it out. Can anyone see which tags I need to fix?
I didn't include the source code for the page as I assume it would be easier to view it with a right click on that page.
Any help would be much appreciated!
Thanks,
Tim
html mobile
asked Nov 22 '18 at 2:19
Tim MTim M
728
add a comment |
Here is the page I'm working on:
https://glutenfreetravelsite.com/mobile/Rhode-Island/Providence/gluten-free-restaurant/Kabob-and-Curry/3795.php
Looks great in a web browser and on mobile, the first part of the page is fine. But when scrolling down to the second review, the review content doesn't fit into the width of the screen.
I've looked at the html and am comparing the html for the first review and for the second review. I can't figure out why the second review isn't displaying correctly.
I understand the html is old and not up to current standards. However, my objective at this point is to get it displaying correctly with the html that's currently there. I'm sure there must be a , , or tag out of place somewhere but can't figure it out. Can anyone see which tags I need to fix?
I didn't include the source code for the page as I assume it would be easier to view it with a right click on that page.
Any help would be much appreciated!
Thanks,
Tim
html mobile
asked Nov 22 '18 at 2:19
Tim MTim M
728
Here is the page I'm working on:
https://glutenfreetravelsite.com/mobile/Rhode-Island/Providence/gluten-free-restaurant/Kabob-and-Curry/3795.php
Looks great in a web browser and on mobile, the first part of the page is fine. But when scrolling down to the second review, the review content doesn't fit into the width of the screen.
I've looked at the html and am comparing the html for the first review and for the second review. I can't figure out why the second review isn't displaying correctly.
I understand the html is old and not up to current standards. However, my objective at this point is to get it displaying correctly with the html that's currently there. I'm sure there must be a , , or tag out of place somewhere but can't figure it out. Can anyone see which tags I need to fix?
I didn't include the source code for the page as I assume it would be easier to view it with a right click on that page.
Any help would be much appreciated!
Thanks,
Tim
html mobile
html mobile
asked Nov 22 '18 at 2:19
Tim MTim M
728
asked Nov 22 '18 at 2:19
Tim MTim M
728
asked Nov 22 '18 at 2:19
Tim MTim M
728
asked Nov 22 '18 at 2:19
Tim MTim M
728
asked Nov 22 '18 at 2:19
Tim MTim M
728
728
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You put your 2nd paragraph in table. I think that's the main problem. Try to put the paragraph outside the table.
However, if you still want to put your paragraph in there, you should add CSS code to make your table responsive. Try this code:
@media
only screen
and (max-width: 760px), (min-device-width: 768px)
and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
margin: 0 0 1rem 0;
}
td {
/* Behave like a "row" */
border: none;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 0;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
https://codepen.io/team/css-tricks/pen/wXgJww?editors=1100
answered Nov 22 '18 at 4:41
Miruku ShekiMiruku Sheki
16313
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53423010%2fwebpage-view-on-mobile-only-top-half-displays-correctly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You put your 2nd paragraph in table. I think that's the main problem. Try to put the paragraph outside the table.
However, if you still want to put your paragraph in there, you should add CSS code to make your table responsive. Try this code:
@media
only screen
and (max-width: 760px), (min-device-width: 768px)
and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
margin: 0 0 1rem 0;
}
td {
/* Behave like a "row" */
border: none;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 0;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
https://codepen.io/team/css-tricks/pen/wXgJww?editors=1100
answered Nov 22 '18 at 4:41
Miruku ShekiMiruku Sheki
16313
add a comment |
You put your 2nd paragraph in table. I think that's the main problem. Try to put the paragraph outside the table.
However, if you still want to put your paragraph in there, you should add CSS code to make your table responsive. Try this code:
@media
only screen
and (max-width: 760px), (min-device-width: 768px)
and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
margin: 0 0 1rem 0;
}
td {
/* Behave like a "row" */
border: none;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 0;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
https://codepen.io/team/css-tricks/pen/wXgJww?editors=1100
answered Nov 22 '18 at 4:41
Miruku ShekiMiruku Sheki
16313
add a comment |
You put your 2nd paragraph in table. I think that's the main problem. Try to put the paragraph outside the table.
However, if you still want to put your paragraph in there, you should add CSS code to make your table responsive. Try this code:
@media
only screen
and (max-width: 760px), (min-device-width: 768px)
and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
margin: 0 0 1rem 0;
}
td {
/* Behave like a "row" */
border: none;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 0;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
https://codepen.io/team/css-tricks/pen/wXgJww?editors=1100
answered Nov 22 '18 at 4:41
Miruku ShekiMiruku Sheki
16313
You put your 2nd paragraph in table. I think that's the main problem. Try to put the paragraph outside the table.
However, if you still want to put your paragraph in there, you should add CSS code to make your table responsive. Try this code:
@media
only screen
and (max-width: 760px), (min-device-width: 768px)
and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
margin: 0 0 1rem 0;
}
td {
/* Behave like a "row" */
border: none;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 0;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
https://codepen.io/team/css-tricks/pen/wXgJww?editors=1100
answered Nov 22 '18 at 4:41
Miruku ShekiMiruku Sheki
16313
answered Nov 22 '18 at 4:41
Miruku ShekiMiruku Sheki
16313
answered Nov 22 '18 at 4:41
Miruku ShekiMiruku Sheki
16313
answered Nov 22 '18 at 4:41
Miruku ShekiMiruku Sheki
16313
16313
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53423010%2fwebpage-view-on-mobile-only-top-half-displays-correctly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
