The grid layout is failing to display properly in different screen sizes

Currently, I am in the process of optimizing a website to be responsive by utilizing master pages and content pages.

The responsiveness seems to work perfectly on pages that contain basic ASP.NET controls such as Textbox, Checkbox, and buttons.

However, I have encountered an issue where the responsiveness does not apply to pages that have a grid view bound.

Here is the code snippet I have inserted into both the master page and all aspx pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="HandheldFriendly" content="true">

In addition, below is the CSS code I have added in the stylesheet:

#main { width: auto; margin: auto;}

Attached are screenshots depicting the failure of the data grid to display responsively:

Image before resizing the browser window:

Image after resizing the browser window:

Should I make further alterations or include more stylesheets?

Thank you for your help.

asp.netcssgridviewresponsive-design

Answer №1

Have you implemented any strategies to optimize the gridview table for narrow screens?

You may find these resources useful:
tips on adding responsive behavior to gridview
jQuery responsive table plugin

Best of luck!

Answer №2

give this a shot 

#primary 
{ 
 width: 960px; 
 margin:0 auto;
 overflow:auto;
}

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

Tips for managing div visibility exclusively through the click of a specific div element

I have 4 div containers, each containing an image. The positioning of the divs is as follows: top left, top right, bottom left, and bottom right. Additionally, there is another disabled div in the center panel control. When any of the divs (top left, top ...

jqueryasp.netcss

What is the best way to implement a sliding animation for a toggle button?

Currently, I am working on a toggle bar element that is functioning correctly in terms of styling the toggled button. However, I would like to add more animation to enhance the user experience. The concept is to have the active button slide to the newly s ...

cssvue.jssasscss-animations

Tips for arranging Radio buttons in multiple columns within the same Radio group in Material UI

As a newcomer in the world of React.js, I am feeling a bit anxious about posting my question on Stack Overflow. I hope everyone can overlook my lack of experience and forgive me for any mistakes. I have been struggling to find the right solution to my prob ...

htmlcssreactjsmaterial-ui

When a single column is achieved, aligning with justify-content space-between

I'm working on styling a div that has two children using flexbox and flex-wrap. I want the layout to adjust without needing media queries - so that when it reaches a certain width, the children are spaced evenly (justify-content: space-between), but w ...

htmlcssflexbox

Having difficulty positioning the image on the left side

Learning CSS can be a challenge, but I recently made progress by using display flex to create a navigation bar. However, I encountered an issue where the background image for the navbar doesn't align with the left side of the screen and results in unw ...

htmlcss

Are there any other methods to kick off a Debugging Session faster?

Looking for a quicker way to start the Debugging Session in Visual Studio during asp.Net development? I usually press F5. Any tips on reducing the build time before starting the Debugger? Appreciate any advice! ...

.netasp.netvisual-studiomsbuild

Struggling to make fadeIn() function properly in conjunction with addClass

I've been struggling with this issue for quite some time now and I just can't seem to make it work. The JavaScript I'm working on involves using addClass and removeClass to display and hide a submenu element. While the addclass and removeCla ...

javascriptjqueryhtmlcss

What is the correct way to call upon Bootstrap's CSS that was obtained through a Gradle dependency?

I'm having trouble referencing the Bootstrap library from the 'External Libraries' section in my project. In my build.gradle file, I included: compile group: 'org.webjars', name: 'bootstrap', version: '3.3.7' ...

csstwitter-bootstrapintellij-ideagradle

The image has max-height within a max-height container inside a fixed-height container

Here's the scenario: Can an image's max-height property be made to respect the fixed height of an ancestor element that is not its direct parent? I am aware that max-height requires a fixed height for calculation, so this query is distinct from ...

cssheight

CSS:Tips for removing borders with border-radius in CSS

I have a div that has been styled with a left-hand border, and it's causing me some trouble. You can view the styling here on Jsfiddle. Is there a way to remove just the left hand side border without affecting the rest of the design or creating an un ...

htmlbordercss

Styling just a single div when the state changes

I have a scenario where I am rendering 4 divs based on data fetched from my backend. Each div is colored according to a state change. While I have successfully implemented this, the issue is that all 4 divs can be colored in this way simultaneously. I want ...

javascripthtmlcssreactjsstate

Keep a stack to hold the content within the div element

I've been dealing with a datatable and successfully managed to open a details page within the same div when a row is clicked using divname.load(@url.action(''). However, I am now looking to add a close button on the details page so that I c ...

jqueryasp.netasp.net-mvc-4datatables

Two CSS borders of varying heights

Just wondering, can we achieve something similar to the style shown in the attachment using only CSS? <h3 style="border-bottom:1px solid #515151"><span style="border-bottom:3px solid #0066b3">HEADER</span></h3> ...

htmlcss

Conflicting configurations in VS Code causing issues

Currently making adjustments to my JSON settings and everything is functioning correctly, however, I keep encountering this persistent error: "Expected comma jsonc(514)" Here's a snippet of my code that's causing the issue: "css.li ...

cssjsonvisual-studio-codesettings

Error in ASP.NET output

After building my aspx page successfully, I encountered the following error in the browser. WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'. Please add a ScriptResourceMapping named jquery(case-sensitive). Stack ...

c#asp.net

Utilizing Flexbox for Spacing

When utilizing flex containers, is it considered safe and acceptable to apply margin-top, margin-bottom, margin-left, margin-right, and padding to create a little space between elements or shift them to the left or right? Or is it more advisable to use f ...

htmlcssflexbox

Issues arise when attempting to use Stylus in conjunction with React

I am currently working on developing a web application that utilizes Stylus and React. I have successfully rewritten all the Stylus language files, but I am encountering an issue where the React components are not being styled as expected. Below is one of ...

cssreactjsweb-applicationsstylus

Display the button immediately following the text within the cell without extending beyond its boundaries

Check out the code snippet below: <td> <div> <span class ="name">Can be long, can be short</span> <button>Test</button> </div> </td> td{ white-space: no-wrap; width:175px; position: relati ...

htmlcss

Enhance your web forms with HTML5 validations for iPad and iPhone devices

How can I customize the appearance of these HTML5 validations? When used in my web application, they currently look like this: https://i.sstatic.net/M4snC.png There is no margin or padding above the text. Is there a way to adjust this styling issue? ...

htmlcssvalidation

Material UI does not support the inline attribute for applying CSS properties

Trying to adjust the CSS for Material-UI When setting the width, everything works fine. However, when attempting to set display inline, an error occurs ---> "inline is not defined" Can anyone provide guidance on how to resolve this issue? Sharing my cod ...

javascriptcssreactjsreduxmaterial-ui