Tips for resizing a responsive website

Is it strange to consider scaling down a fully responsive website? Our client insists that every website, including his other ones, should have a max-width of 980px like his main site.

So, if the screen size exceeds 980px, how can I scale down the website accordingly?

Just to provide some context, we already used media queries to make the website responsive on mobile, tablet, and desktop. However, the client wants the website to behave as if it has a desktop resolution even when the screen is wider than 980px, which currently falls under the tablet resolution.

htmlcssangularjs

Answer №1

To effectively communicate with the client, consider negotiating the addition of a wrapper or content div to enclose all page content. Set the maximum width to 980px;, adjusting it to 1180px; for larger devices. Enhance the overall design by incorporating a background color or image with a subtle blur effect. When the screen size is below 980px, switch to a width of 100%.

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

Provider not found: attrsProvider <- attrs

Encountering an issue while trying to access attributes from the child controller > Unknown provider: attrsProvider <- attrs Below is the code snippet: var app = angular.module('plunker', []); //parent controller app.controller('Ma ...

javascriptangularjs

Hugo inquired about the process of including a class specifically for the final post

I've set up my baseof.html file to add the class first-post to the body tag in order to style the first post differently from the rest, especially when paginated: <body class=" {{ with where site.RegularPages "Type" "posts" }} {{ $first_post = ind ...

csshugo

jQuery Animation Issue: SlideDown Effect Not Working as Expected

I'm feeling quite confused about this situation. I've been attempting to utilize the slideDown function in jQuery, but when I click on the 'information' div, it just jumps instead of animating smoothly. I suspect that one of the cause ...

javascriptjqueryhtmlcssslidedown

Is there a way to bypass the serialization and deserialization process for users in Passport.js?

Utilizing Passport.js and Angular for a web application, I aim to leverage Passport.js for authentication without the use of sessions. However, I consistently encounter an [Error: Failed to serialize user into session] each time I attempt to authorize a us ...

javascriptangularjspassport.js

At what point does the controller become active within AngularJS?

I'm currently exploring the concept of $scope in AngularJS and how controllers are connected to views. When Angular first scans through the DOM elements and encounters ng-controller, what exactly happens? I understand that when it comes across binding ...

angularjs

Building a node.js form that supports multiple images and input fields

After spending nearly an entire day trying to resolve this issue, I am seeking some assistance. Within my project, I have implemented a feature called "Add Product" which is functioning just as I envisioned it. However, I would like users to have the abili ...

angularjsnode.jsmongodbexpressmongoose

Issues with hover functionality in React Material Design Icons have been identified

I'm facing an issue with the mdi-react icons where the hovering behavior is inconsistent. It seems to work sometimes and other times it doesn't. import MagnifyPlusOutline from "mdi-react/MagnifyPlusOutlineIcon"; import MagnifyMinusOutli ...

javascriptcssreactjsmaterial-uijsx

The proper method of updating the scope value within an AngularJS view

Click here to see the code <a ng-click="deleteOrdersUpdate()">Update</a> <span class="red">{{noOfOrders}}</span> This is the controller code $scope.deleteOrdersUpdate=function () { $scope.noOfOrders=$scope.selection.length; ...

angularjsangularjs-scope

Navigating through C# Web API routing in tandem with Angular's routing capabilities

Can a MVC application be configured to use routing from WEB API exclusively, with Angular handling the rest using its routeprovider? Upon running my application, I encounter the following error: GET http://localhost:8080/Views/Home/Index.html 404 (Not Fou ...

c#asp.net-mvcangularjs

Error: The array contains an undefined image object

Currently, I am implementing a simple image preloading technique using promises. This function is integrated into a larger Angular (1.3.15) custom directive. Here is the JavaScript code snippet: function preLoad() { var deferred = $q.defer(); ...

javascriptarraysangularjs

Exploring the capabilities of AngularJS2's formGroup and formControlName functionality

Exploring the world of AngularJS2, I recently created a sign-up page utilizing formGroup formControlName, but encountered an issue with passing null values to the object. HTML code: <div class="col-md-8 col-md-offset-2"> <form [formGroup]="m ...

htmlnode.jstypescriptangular2-forms

Numerous buttons available for inputting into individual text boxes all on one page

<html> <body> <script> function enterNumber(num) { var txt=document.getElementById("output").value; txt=txt + num; document.getElementById("output").value=txt; } </script> Select numbers: <br> <input type="button" val ...

javascripthtml

Styling your Kendo grid in ASP.NET MVC with custom CSS styling

I am facing a challenge with displaying two kendo grids side by side on a single view page. To modify the CSS style of a kendo grid using ASP.NET, I typically use: .HtmlAttributes(new { style="width:50%"}) However, when attempting to change more than one ...

cssasp.netasp.net-mvckendo-uikendo-grid

Is it possible to maintain the sidebar while eliminating the scrolling JavaScript?

Looking to recreate the image display style on Facebook where pictures appear in a lightbox format. The challenge I'm facing is figuring out how they manage to have the sidebar with no visible scroll bar inside... If you want to see this for yourself ...

javascriptjqueryhtmlcss

The HTML div captured with html2canvas is incomplete

I am currently developing a meme editor website utilizing the html2canvas library available at Below is the HTML code for the div I aim to capture: <div class="container"> <div id="theUserMeme"> <div class=& ...

javascripthtmlhtml2canvas

Steps for transferring Children to the Angular Directive correctly

I'm having trouble passing FormGroups that are inside children components to my directive. Why are they not being passed correctly? I attempted to use both ViewChildren and ContentChildren, but the result returned is undefined. <div block="ta ...

angularangularjsangular-reactive-formsformgroupsviewchild

Is there a way to manipulate HTML elements on a webpage using Swift and Xcode?

Is it feasible to manipulate HTML elements on a website from an iOS application? For instance, displaying www.google.com using a UIWebView. I am interested in achieving the following, if this idea/concept is doable: Detecting whether the user has input ...

htmliosswiftuiwebview

When you click on an element in Angular, it will not fade out as expected, instead displaying the error message "

After pressing the delete button in my twig file, the item is removed but it doesn't fade away as expected. I tried to seek help on this thread but couldn't comprehend the solution. Although the item is being deleted, I am encountering an error ...

jqueryangularjs

Arrange the object's key-value pairs in ng-repeat by their values

I'm completely new to AngularJS and I am working with an API that returns key-value pairs related to different sports. $scope.sports = { 1: "Soccer", 2: "Tennis", 3: "Basketball" ... }; My challenge is sorting these items by sport name: <ul> ...

javascriptangularjssorting

"HTML Parsing with Simple DOM: Dealing with Class Names Containing Spaces

I am currently utilizing PHP Simple HTML DOM to extract elements from the source code of a website (which is not my own). However, when attempting to locate a ul class named "board List", it is not being found. It seems like there may be an issue with spac ...

phphtmlsimple-html-dom