The lower half of the screen is missing when viewed on mobile devices

On a particular page of our website, the content on the right side seems to be hidden. Can anyone explain why this might be happening and provide suggestions on how to fix it? Thank you.

<div id="responsivearea" style="margin-top: -23px; padding-top: 90px;">
<div class="img-center"><img class="wp-image-2520 alignleft" style="margin-right: 180px;" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2015/02/Meet-rabia.png" alt="good employer" width="190" height="100" /><a href="http://asiasociety.org/video/asher-hasan-spark-extinguished" target="_blank"><img id="AshersStory" class="wp-image-2521 alignleft" style="margin-right: 80px;" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2015/02/Ashers-story-circle.png" alt="gift of health" width="190" height="188" /></a></div>
</div>
</div>
<p style="float: left; margin-left: 48px; font-size: 25px;">MEET RABIA</p>
<p style="float: right; margin-top: -79px; margin-right: 100px; font-size: 25px;">ASHER'S STORY</p>

<div>
<p style="float: left; margin-left: 26px; font-size: 15px; width: 200px;">Every detail of our work is hand-coded with meticulous attention. We are committed to going above and beyond to deliver the perfect product.
<a style="color: #fd685b;" href="#"><strong>LEARN MORE</strong></a></p>
<p style="float: right; margin-top: -183px; margin-right: 107px; font-size: 15px; width: 180px;">Asher's upbringing in England was abruptly altered by his father's passing when he was just eleven years old. To know more about his story, visit
<a style="color: #fd685b;" http://www.inspuratesystems.com/nayajeevan/?p=3202"><strong>LEARN MORE</strong></a></p>
htmlcss

Answer №1

Check out the source code at , specifically line 178 where there is a strict width value set to 700px.

You might want to consider using max-width instead.

Also, take a look at line 242 which sets the width to 600px.

Answer №2

Using px for setting width on everything is not optimal for mobile devices due to their varying sizes. Consider using % instead, as it allows elements to adjust proportionally to the screen size rather than a fixed amount of pixels.

Currently, there are instances on your website where the pixel dimensions exceed the screen size, causing certain elements to be unseen.

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

Limit the container's height to be no more than the height of the

Seeking input on good and bad practices in CSS/HTML/jQuery, I recently asked a question about determining when it is appropriate to use jQuery to set container dimensions. The responses I received were helpful (view them here). Realizing that jQuery may n ...

htmlcss

Dynamic Label Editing on ASP Page Using Master Page

I am working on an ASP page with a Masterpage element on my website. The specific functionality I am trying to implement involves having multiple labels with an edit hyperlink next to each one. When the user clicks on the Edit hyperlink, I want the label t ...

.nethtmlajaxc#-4.0

Multiple images overlapping each other in a dynamic parallax effect

Despite my fear of receiving down votes, I have been unsuccessful in finding the answer to my question so I will proceed with asking it. I am attempting to replicate a parallax effect similar to the one showcased on this website, particularly the image of ...

jqueryhtmlcss

With each click of the refresh button, a new email is dispatched

I'm struggling with my code as I try to create a contact form. My knowledge of php is limited, and I keep encountering issues. Every time I refresh the page, an email is sent automatically and I receive the "Confirm form resubmission" message which is ...

phphtmlcontact-form

Ways to access a field value in SAPUI5

As I delve into OPENUI5/SAPUI5, I'm faced with the task of accessing data for the controls I've implemented. For instance: <Label text="Amount" /> <Input id="inputAmount" value="{Amount}" /> <Text id="lblCurrency" text="USD" > ...

javascripthtmlmodelsapui5

Arrange the labels and input fields within nested elements in a synchronized manner

My data is structured semantically as shown below: <div class="inputs"> <div class="top"> <h4>Top</h4> <label for="top-1">Label 1</label> <input id="top- ...

csslayout

How CSS properties can cause one div to push down another

I am looking to incorporate a simple sidebar into an existing layout (content). Here is what I have so far: HTML <div class="container"> <div class="side-menui"> </div> .... </div> Full HTML <div class="c ...

htmlcss

Creating grid layouts in Bootstrap 4 with buttons

Recently, I've delved into Bootstrap 4 and HTML5/CSS. My goal is to design a text area with two buttons located on the side (horizontally centered) like this: https://i.sstatic.net/TnHSy.png Below is the code snippet that I have so far: <link ...

htmltwitter-bootstrapbootstrap-4

Having trouble with the background-image not displaying and the image not showing up as expected?

I am experiencing an issue with my background image not displaying on my website. I am utilizing HTML5 along with CSS. Below is the code snippet in question: body { width: 1000px; background-image: url(background.jpg); background- ...

htmlcss

Is there a way to utilize JQuery to swap out a CSS background image while preserving the gradient effect?

Currently, I am facing a challenge in dynamically updating the background-image property of a div while preserving other background-related properties (such as color and gradient) using jQuery's .css() function. Although I can successfully replace the ...

javascriptjqueryhtmlcssbackground-image

Send the user back to the homepage without the need to refresh the page

When the user clicks "Okay" in my window.prompt, the code below opens a new tab. Is there a way to direct the user to the home page without opening a new tab? if (window.confirm("Do you really want to leave?")) { window.open("./Tutoria ...

javascripthtmlreactjswindowalert

How can I activate a disabled option number 2 after selecting option number 1?

I have encountered an issue with my JavaScript code. The second "select" element is supposed to be disabled by default, but I want it to become enabled when an option is selected from the first "select". However, this functionality is not working as expect ...

javascriptjqueryhtmlcss

Attempting to troubleshoot the issues causing my React application to malfunction

Having some trouble with my Spotify project. Every time I search for an artist, I receive an error message saying "illegal redirect_uri." I am also facing a list of coding issues that I am struggling to resolve. Any advice or suggestions would be greatly a ...

javascripthtmlcssreactjs

Change your Bootstrap 4 navbar to a two-row layout using Bootstrap 5

Looking to update the navbar from Bootstrap 4 to Bootstrap 5 with two rows I came across this code snippet that works well for me in Bootstrap 4: https://codepen.io/metismiao/pen/bQBoyw But now I've upgraded to Bootstrap 5 and need help converting it ...

cssbootstrap-5

Display only the selected index and conceal the rest

I am facing an issue where I have added a label and input in ng-repeat. The functionality works fine when the user clicks edit to show the input and hide the label. However, the problem arises when the user clicks on the new button as it displays the new i ...

javascriptjqueryhtmlangularjs

Tips for constraining elements to set heights according to content in "stepped" increments

Is there a way to have "step-based heights" on a div? I created a small example to illustrate my question. My goal is to make sure that each box has a height that is a multiple of 400px. For instance, if a box with height: auto; is 345px, it should displa ...

htmlcss

I am looking to include a popover within my modal using Bootstrap version 3.0.2

Hey there, I'm having an issue where the popover that should be inside the modal is actually appearing outside of it in the top left corner, not visible within the modal itself. Below is my index code: <button type="button" id="example" class="bt ...

javascriptjquerycsstwitter-bootstrap

Resolving a CSS Layout Dilemma: How to Overlay Sidebar on Wrappers

I've run into a challenge while attempting to position a sidebar over page wrappers. The issue with absolute positioning arises when the sidebar needs to align with the corner of the blue header. I have contemplated using JavaScript to maintain its cu ...

javascriptjqueryhtmlcssfrontend

Unable to adjust the border radius of a filled text-field variant in Material-ui-core

Situation at Present ...

javascriptcssreactjsmaterial-uistyled-components

Enforce movement within an element by using "Tab" clicks – Utilizing Jquery/Javascript

I have designed a dialog box with the role of "dialog" and I am looking to focus on Tab key press inside the dialog box. There is a Close button already present in the dialog. Currently, when the dialog opens, focus shifts to the first input button and the ...

javascriptjqueryhtml