Is Your Mobile Site Displaying Differently?

Although my resume website looks great on Desktop, I recently noticed that the HTML paragraph tags do not scale correctly when viewed on various mobile web browsers (refer to the images attached below).

Screenshot 1: Website displayed in Facebook Messenger's integrated web browser.

Screenshot 2: Website seen in Android 7.0's Google Chrome App.

The CSS code I am using for my HTML paragraph tags is as follows;

p {
    font-family: 'Lato', sans-serif;
    color: #b3b3b3;
    font-weight: 400;
    line-height: 1.8em;
}

My ultimate goal is to achieve a consistent look across all mobile web browsers similar to screenshot 1. Can someone help me identify the issue and suggest a solution?

EDIT: I unintentionally omitted an important fact; all content on my website is within a table structured like this;

<table width="900" border="0" cellpadding="4" align="center">
<tbody>
<tr>
<td class="background">

<!-- HTML content of the website here -->

</td>
</tr>
</tbody>
</table>

Additonally, I found that I can center my website by utilizing the following CSS and HTML instead of enclosing everything in a table;

#page-wrap {
     width: 800px;
     margin: 0 auto;
}

<body>
  <div id="page-wrap">
    <!-- HTML content of the website here-->
  </div>
</body>
androidhtmlcss

Answer №1

Check out these options:

@media only screen and (max-width: 320px) {
    /* Custom styles for screens up to 320px */
}


/* Tablet (portrait and landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Styles for tablets in both portrait and landscape modes */
}


/* Tablet (landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* Landscape mode styles for tablets */
}


/* Tablet (portrait) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    /* Portrait mode styles for tablets */
}

@media screen and (min-width: 37em) {}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mysterious line appearing beneath alternate rows in Table with border-collapse and border-spacing applied. Unable to pinpoint the culprit property causing the issue

After searching for a solution to add space between the rows in my table, I finally found the answer on Stack Overflow. The implementation seemed to work fine at first glance, but upon closer inspection, I noticed an issue depicted in the screenshot below: ...

javascriptcssreactjsmaterial-ui

You can eliminate the display flex property from the MuiCollapse-wrapper

Having trouble removing the display flex property from the MuiCollapse-wrapper, I did some research and found the rule name for the wrapper in this link https://material-ui.com/api/collapse/ I have been unsuccessful in overwriting the class name wrapper t ...

javascripthtmlcssreactjsmaterial-ui

Setting the transition time for adding or removing components in ReactJS CSS

As the list component changes in size based on its children, it tends to move around abruptly. Applying transition: 'all 0.3s ease' doesn't resolve this issue since it's the layout that is affected by the number of children rather than ...

htmlcssreactjs

PHP comment form failing to process complete field inputs

Having some issues with a PHP comment form on my website. It's not sending all the inputted information from the fields. Any help would be greatly appreciated. This is the HTML code I'm using: <form method="post" action="assets/php/mail.php" ...

phphtmlformscomments

What is the reason for ng-submit not being prevented by a mandatory select field?

In an HTML5 form, when a select element is required and no option is selected, the appropriate styling for invalidation is applied. However, the ng-submit still allows the form to be submitted. Why does this occur and is there a way to prevent submission ...

htmlangularjsforms

The for loop does not cycle through every element

I'm working on a class project that involves creating custom HTML tags with JavaScript. I have a for loop set up to iterate over each use of the tag, but for some reason, it only seems to loop over every other tag. I'm specifically trying to crea ...

javascripthtml

Placing two tables in an HTML document

I am working on integrating two tables into my web application and I would like them to be positioned on the same row horizontally. <span><table><tr><td>A</td><td>B</td></tr></table></span> <s ...

csshtml

JavaScript makes it simple to display student names based on their ID numbers

Here is my JavaScript code: <script language="Javascript"> var data = { 7: "Jack Black", 8: "John Smith" }; var id = document.getElementById("id"), emp = document.getElementById("name"); id.addEventListener("keyup", function() { emp.value ...

javascripthtmlnumberslookup

I'm unable to modify the text within my child component - what's the reason behind this limitation?

I created a Single File Component to display something, here is the code <template> <el-link type="primary" @click="test()" >{{this.contentShow}}</el-link> </template> <script lang="ts"> imp ...

javascripthtmltypescriptvue.js

Is the text alignment off?

I've been immersed in creating a website, but I encountered an issue for which I can't seem to find the solution. Check out my text alignment here (test) - it's not aligned all the way to the left of the content Here is the HTML code: < ...

htmlcss

Fade in and out on button press

There is a button with the following HTML code: <input type="submit" id="btnApply" name="btnApply" value="Apply"/> Upon clicking the button, a div should be displayed. <div> Thanks for applying </div> The display of the div should fade ...

javascripthtml

Tips for incorporating a download button into a video player using Plyr JS

I'm using Plyr JS and I am trying to add a download option for each video. Here is what I've done so far to make the download option work: Even though I have included: controlsList="nodownload" <video controls crossorigin playsinline contro ...

javascripthtmlhtml5-videoplyr.js

Obtaining a series of months - Java

Looking to create a tab layout featuring a range of months? Need to include the last 12 months as well as the next 12 months? Familiar with obtaining the next 12 months, but unsure how to also retrieve the previous months? Considering using the joda time ...

javaandroidjava-time

Concentrate on the disappeared div element following the AJAX request

Encountering an unusual issue here that has me a bit puzzled. In one of my DIV elements, I have included several links which trigger an AJAX call (using jQuery) upon being clicked. The server (Controller) then responds with HTML content, specifically a JS ...

javascriptjqueryhtmlajaxspring-mvc

Utilizing CSS for fixed positioning and media queries

I'm currently facing an issue with media queries and a sidebar div that has a fixed position. The problem arises when the viewport becomes too narrow, causing the main content to shift to the left and end up below the sidebar. I attempted to resolve t ...

cssstaticpositionmedia-queriesfixed

Unable to reset disabled styling for CSS select box

My Windows 8 app consists of two pages: Page1.html and Page2.html. Page1 references ui-light.css and page1.css, while Page2 references ui-light.css and page2.css. In the ui-light.css file, there is a rule defined for the disabled state of select boxes. I ...

cssselectwindows-8modern-ui

Unable to parse JSON data for grid display due to stream decoding issue: java.io.FileNotFoundException

My goal is to showcase images from a path stored in a remote MySQL database on an Android application within a GridView. However, I am struggling with the implementation and would greatly appreciate any guidance. Below is the code snippet where I fetch th ...

javaphpandroidjson

experiencing empty JSONObject values

My goal is to create a JSONObject, but I am encountering an issue in Android Studio where it is returning null. Can you help me identify where I have gone wrong? I have attempted two different methods to create the JSONObject. Method 1: String JSONStrin ...

javaandroidjsonnull

Having trouble getting a background image with tint to display properly in Bootstrap

I applied a sleek black transparent gradient to my body background picture, but as soon as I integrated bootstrap into the HTML code, the effect ceased to function. body { background: linear-gradient( rgba(0, 0, 0, 0.5), rgba ...

htmlcssbootstrap-4

Removing the blue border around a button upon being clicked

Whenever I press my button, an unexpected event occurs. Is there a solution to avoid this issue? Thank you for your help! :) ...

htmlcssstyles