Customize the layout of ASP.Net by adjusting the image and button sizes according to screen resolution for a responsive design

I am still new to the world of HTML and CSS. I have a basic understanding, but when it comes to designing, I struggle. I believe what I want is achievable, but my searches are not yielding the results I need. That's why I'm reaching out to you all for help. (I think it's called Responsive Layout? Please correct me if I'm mistaken)

Here is the page I currently have: https://i.sstatic.net/sUybv.jpg

I am satisfied with how it looks, but my goal is to maintain this layout regardless of the resolution. For example, if I resize the browser window, I want the logo to remain centered above the two buttons.

Here is my current code snippet:

<img src='../../iScrape.png' style="margin-top:25%;margin-left:35%;" />
            <br />
            <input id="Button1" type="button" value="LEARN MORE"style="
        margin-top:2%;
        margin-left:34%;
        padding-left:2%;
        padding-right:2%;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color:transparent;
        border-color:white;
        font-family:Verdana;
        color:white;
        " onclick="location.href='@Url.Action("About", "Home")'" />
            <input id="Button2" type="button" value="TESTING1 TWO" style="
        margin-left:2%;
        padding-left:2%;
        padding-right:2%;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color:#ED5B53;
        border-color:transparent;
        font-family:Verdana;
        color:white;
        " onclick="location.href='@Url.Action("Testing1two", "Home")'" />

(This code is within the body of a basic template in an ASP.Net project).

I'm hoping there is a straightforward way to achieve my desired layout. I am confident that such a solution exists because experiencing cropping like this:

https://i.sstatic.net/57zOz.png

is not ideal.

htmlcssasp.netresponsive-designstyles

Answer №1

To incorporate Bootstrap into VS, utilize Package Manager. Then, simply introduce a personalized CSS class.

Once this is completed, you can easily insert the buttons as follows:

<div class="container">
    <div class="row">
        <div class="center-block">
            <!-- place buttons here -->
        </div>
    </div>
</div>

If desired, include a background image to a body class within your unique CSS.

Find more information in the documentation: http://getbootstrap.com/css/#helper-classes-center

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

Transform the look of an inactive hyperlink

Can the visual style of an HTML link be modified when it is disabled? For instance, by implementing something like this: a.disabled { color:#050; } <a class="disabled" disabled="disabled" href="#">Testing</a> The code snippet above appears ...

htmlcss

Issues with hiding divs using AngularJS and Bootstrap pagination

Currently, I am utilizing AngularJS and pagination to display multiple divs on my webpage. These divs are then hidden based on specific criteria that I have established. You can see an example of the code snippet below: <div class="Data ...

javascriptcssangularjs

What is the best way to adjust the font size for a bootstrap-select dropdown menu?

I attempted to create a new CSS class to customize the appearance of the dropdown menu, but unfortunately, it doesn't seem to be taking effect. #form.py class fundForm(forms.Form): fund = forms.ChoiceField(choices=FUND, required=True, widget=for ...

pythonhtmldjangobootstrap-4bootstrap-select

Tips on how to add information to the following <li> tag

I'm trying to append data to the closest li element when clicked using jQuery, but I've tried next, parent, closest, find and nothing seems to be working. Here is a link to my jsfiddle showcasing the issue: http://jsfiddle.net/kT3Rb/47/ This i ...

jqueryhtml

Issue with MUI Grid item not functioning properly when using overflowY: "auto"

I am encountering an issue while using MUI with React. I have a <Paper> element wrapping a <Grid> with 3 children elements. The problem arises when I set the overflowY property of the bottom grid item to "auto" - instead of showing the scroll b ...

cssreactjsflexboxgridmaterial-ui

Send properties to the makeStyles function and apply them in the CSS shorthand property of Material UI

When working with a button component, I pass props to customize its appearance: const StoreButton = ({ storeColor }) => { const borderBottom = `solid 3px ${storeColor}`; const classes = useStyles({ borderBottom }); return ( <Button varian ...

javascriptcssreactjsmaterial-uijss

Tips for ensuring that your modal functions properly with an image tag within a figure tag

I'm facing an issue with getting a modal to display on my image gallery. The problem arises when the images are enclosed within figure tags, necessary for my hover effect, causing the modal to malfunction. I suspect that the problem lies within the f ...

javascripthtml

Using JavaScript in ASP.NET with C# to enable a checkbox on Full Gridview row selection

Upon clicking a gridview row, I am able to check a column of checkboxes. However, this functionality is limited to a specific column only, as clicking directly on the checkbox itself does not trigger the action. For example, when clicking anywhere in this ...

javascriptc#asp.net

What steps do I need to take to successfully get this JavaScript Timer working?

I'm currently working on developing a timer using JavaScript. However, I've encountered an issue where the timer does not stop once it reaches zero. I've attempted to use return and if statements without success. Is my approach correct, or i ...

javascripthtmlsyntaxtimercoding-style

Is it possible to apply a specific CSS color to a row in Angular 9 mat-tables without having to individually set it in multiple locations?

I am working on a mat-table in Angular 9 where I need to implement a function that determines the CSS class for each row... getRowClass(item: Item): string { let class_ = ""; if (...condition1...) { ... } else { class_ ...

cssangularangular9mat-table

Once the div content is reloaded using AJAX, the refreshed HTML suddenly vanishes

My JS code reloads the div every 2 seconds: var auto_refresh = setInterval(function() { $('#indexRefresh').load('/includes/index_refresh_include.php?_=' + Math.random()); }, 2000); After that, I have an AJAX request that loads mor ...

javascriptjqueryhtmlajax

A guide on navigating full images using CSS

I am searching for a code that will enable scrolling through entire images on my landing page. It is a bit challenging to explain, but it is similar to the style of scrolling on tesla.com. Each scroll of the mouse wheel moves down one complete image. Can ...

javascripthtmlcss

Utilize the get method to showcase data in a material UI table for a React application

Just starting out with React. Managed to create a table component with hard-coded data. However, I now have all the data stored in table.json. Can someone guide me on how to fetch values from table.json using an axios get request an ...

htmlreactjsreduxaxiosmaterial-ui

JavaScript Advanced Filtering techniques

I'm currently working on implementing a more advanced filtering system using JavaScript. The challenge I'm facing is when users select multiple checkboxes, I want the results to only display items that are tagged with all of the selected checkbox ...

javascriptjqueryhtml

Distinct styling for the start and subsequent lines of an anchor element using ::before pseudo-element

I'm currently working on a project that requires adding a decoration in front of some anchor links (A). Right now, I am using ::before to achieve this. However, there is an issue where some of the links will line-break and the second line and subseque ...

css

Is there a way to trigger a button's onclick function when its value is changed using the onchange event?

Is it possible to have an onclick function run when a radio button within an HTML form is selected? I tried using onclick instead of onchange but it doesn't seem to work with radio buttons. Any suggestions or tips on how to resolve this issue? func ...

javascripthtmljqueryonclickonchange

Updating ASP.NET Core Application Target Framework Version

Is there a way to change the Target Framework Version in an ASP.NET Core app using Visual Studio 2015? I specifically want to target "NETStandard.Library": "1.6.1". This is how my project.json frameworks section currently looks: "frameworks": { "n ...

asp.net.netasp.net-core.net-core.net-standard

What steps should I take to confirm the text exists within a particular <DIV> element using Selenium WebDriver (java) and Chrome?

Background: My current setup involves using Selenium WebDriver with Java and utilizing Google Chrome as the browser. I have a question regarding locating specific text on a webpage. What if there are multiple instances of the same text that I am looking f ...

javahtmlseleniumxpathselenium-webdriver

Maintain the fixed position of the horizontal scroll bar

I'm facing an issue with a popup window that displays a frameset. Within one of the frames, I'm using jQuery tabs to show some text. The problem arises when trying to display long text or when resizing the window, causing the horizontal scroll t ...

jqueryhtmlcsspopupwindowjquery-tabs

Exploring the capabilities of soup.find() for achieving partial matches

I've been struggling to find an answer to this issue elsewhere, so I'm turning to this code: soup.find(text="Dimensions").find_next().text to extract the text after "Dimensions". The problem arises on the website I'm scraping beca ...

pythonhtmlseleniumweb-scrapingbeautifulsoup