Developing User-Friendly Websites with Responsive Design

While I was working on my project, I realized that using only pixel values in tables and sidebars was a big mistake. This caused issues because if someone had a different screen resolution, my website would look distorted and unappealing.

Could you please advise me on which codes to use for implementing responsive design?

I am aware that using percentage values for width and height can be beneficial. However, I am not entirely sure how to properly incorporate % values. Are there any other steps I should take?

htmlcsslaravel-5responsive-design

Answer №1

I prefer utilizing "rem" units to prevent any issues, especially when it comes to the max/min widths of media.

Assuming 1rem = 16px for your desktop design, in almost all cases things will work smoothly even on lesser-known devices.

https://www.w3.org/TR/css-values-3/#font-relative-lengths

EDIT: (due to the comment)

There are a couple of key points. 1.- Utilize "rem" for sizing elements (like font-size: 0.875rem rather than font-size:14px) to maintain proper proportions relative to pixel size, 2.- Employ @media queries to adjust layout based on screen width, incorporating rem sizing as well, where min-width 20rem equates to approximately the width of 20 "M" letters (not entirely accurate, but close).

For example, imagine you have a 24-inch screen with 1480px resolution, and your friend also has 1480px but on a 6-inch screen. If you set the font size to 12px, it may look good to you, but small to your friend. Device/browser developers may establish different rem sizes based on the physical size of the device (e.g., 24px), so your 0.875rem will translate to 21 pixels on their screen (more comfortably legible).

The adaptation of layout for narrow screens can also involve these rems, providing a more user-friendly experience for both scenarios. While you have a screen width of 92.5 rems at 1480px, your friend would have 74 rems due to the smaller display size.

Answer №2

If you're looking to create a sidebar that takes up 1/4th of your website, using percentage values can make it simple:

.container { 
   width: 75% 
}
.sidebar { 
   width: 25% 
}

By setting the container to 75% width, you leave 25% space which can neatly accommodate a sidebar next to it (don't forget to add float:left to both elements).

But what about mobile view where you want both the container and sidebar to be 100% width? You can achieve this with media queries:

//medium phone size
@media screen (max-width: 425px) {
   .container {
      width: 100%
   }
   .sidebar {
      width: 100%
   }
}

Answer №3

Here are a few options for addressing this issue:

  • Implement media queries in your pages to make them responsive.
  • Utilize a CSS grid along with media queries.
  • Consider using Flexbox in combination with media queries.
  • Explore other CSS frameworks that include a built-in grid system.

Answer №4

One way to create a responsive website is by utilizing Bootstrap. This framework not only ensures responsiveness but also offers a wide range of pre-designed styles for elements like buttons, fonts, and tables, making it easier to implement with just a few classes.

If Bootstrap seems daunting, consider following the advice from @Damian Makkink and @Marc_DNL that has been shared in previous responses.

In my opinion, developing a custom CSS for a responsive site and design yields better results. Personally, I started with Bootstrap for my hobby project, but eventually transitioned away from it altogether.

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

Error displaying Font Awesome icons

I am currently facing challenges with managing my assets using webpack. I have installed font-awesome via yarn and imported the .css files into my webpage. However, despite my HTML recognizing the classes from font-awesome.css, the icons I am attempting to ...

csswebpackfont-awesomeyarnpkgsymfony-3.3

Center the p tag vertically

To ensure the text inside the p tag aligns vertically in the middle, I've set a specific height for the tag. While this works perfectly for single-line text, it shifts to the top of the p tag when there are two lines of text. It's important to k ...

htmlcssparagraph

Display or conceal elements using the unique identifier selected from a dropdown menu in JavaScript

I have been searching the internet for a solution to my issue but nothing seems to be working. Here is the problem: Unfortunately, I cannot modify the TR TD structure and am unable to use DIVs. I am trying to dynamically display certain TD elements based ...

javascripthtml

Tips for including custom attributes in Laravel paginated JSON output

Within my index method, I have the following code snippet: public function index() { // dd(Poll::paginate(2)); return response()->json(Poll::paginate(2),200); } The resulting JSON object generated by this method looks like this: ...

jsonlaravellaravel-5response

Issues with Bootstrap Contact Form submission

I found a helpful tutorial for creating a form at the following link: After following the tutorial, I added these scripts to the bottom of my contact form HTML: <script src='https://code.jquery.com/jquery-1.12.0.min.js'></script> ...

javascriptphphtmltwitter-bootstrapexpress

AngularJS fetches the 'compiled HTML'

If I have this angularjs DOM structure <div ng-init="isRed = true" ng-class="{'red': isRed == true, 'black': isRed == false}"> ... content </div> How can I obtain the 'compiled' version of this on a cl ...

javascripthtmlcssangularjs

Aurelia TypeScript app experiencing compatibility issues with Safari version 7.1, runs smoothly on versions 8 onwards

Our team developed an application using the Aurelia framework that utilizes ES6 decorators. While the app works smoothly on Chrome, Firefox, and Safari versions 8 and above, it encounters difficulties on Safari 7.1. What steps should we take to resolve th ...

javascripthtmltypescriptecmascript-6aurelia

Submitting documents via jQuery post

I am facing an issue with my HTML form where I am trying to upload an image file. After submitting the form, I use JavaScript to prevent the default action and then make a jQuery post request (without refreshing the page) with the form data. However, despi ...

jqueryhtmlajaximagepost

tap the hyperlink to complete the form and mimic the action of a designated

I'm working on an HTML form that includes a table and two submit buttons. <input type="image" name="button1" value="First Button" src="some_image.png"> <input type="image" name="button2" value="Second Button" src="some_image.png"> One ch ...

javascriptjqueryhtmldom

Vertical centering not functioning as expected due to issues with margin-top and margin-bottom

I'm having trouble centering my red block in the middle of the webpage, with the footer block at the bottom and the white block between them. Oddly enough, margin-top doesn't seem to be working for me, but left and right are functioning fine. Al ...

jqueryhtmlcss

The Art of Dynamic Component Manipulation in Angular

The current official documentation only demonstrates how to dynamically alter components within an <ng-template> tag. https://angular.io/guide/dynamic-component-loader My goal is to have 3 components: header, section, and footer with the following s ...

htmlangulartypescript

The menu in IE7 seems to have a mind of its own, appearing and

Having trouble with my menu displaying correctly in IE7. It seems to be a stacking issue: the menu initially appears but disappears once the header image and rest of the page load. I've tried adjusting the z-index values in both the menu and its paren ...

cssstackinternet-explorer-7

Tips for extracting links from a webpage using CSS selectors and Selenium

Is there a way to extract the HTML links per block on a page that renders in JavaScript? Would using CSS or Selenium be more effective than BeautifulSoup? If so, how would I go about utilizing either of those methods to achieve the extraction of the HTML ...

pythoncssseleniumcss-selectors

AngularJS application is throwing an error indicating provider $q is not recognized

Could someone please advise on what might be the issue with my code snippet below: var app = angular.module('app', [ 'angular-cache', 'angular-loading-bar', 'ngAnimate', 'ngCookies', &a ...

javascripthtmlangularjs

Leveraging functions with Ng-Repeat

I am currently dealing with two different arrays of objects. The first array contains a list of permissions groups, while the second array consists of user groups. My main goal is to compare the Group Owner (which is represented by ID 70) with the list of ...

javascripthtmlarraysangularjsangularjs-ng-repeat

Hosting Laravel 5.1 file uploads

I recently created a web application using the powerful Laravel 5.1 PHP framework on my trusty local XAMPP server. When it comes to transferring my project to a shared hosting server, which specific files or folders should I make sure to upload? Is it n ...

phplaravellaravel-5

Creating a dropdown menu and adjusting the content below

Feeling stuck in one place with my code here: link The side navbar animation is almost what I want, but clicking one option opens all of them. Hoping for a similar effect like this page: link $(document).ready(function() { $('.interfejs, .proces ...

jqueryhtmlcss

-=:Heading with a decorative vertical line=:-

Currently, I am working on a CSS project that requires page titles (headings) to be centered with horizontal lines positioned vertically on both sides. Additionally, there is a background image on the page which means the title's background must be tr ...

htmlcsspseudo-class

changing the visible style of a div element using JavaScript

I'm having an issue with a link on my webpage that is supposed to show or hide a <div id="po" style="display:none;">some html</div> element. The first time I click the link, the div displays properly. However, after tha ...

javascripthtmlcss

Tips for submitting a form remotely using Radix Alert Dialog and the form attribute

Currently, I have integrated a Radix UI's Alert Dialog in my Next.js 13 app to confirm the deletion of a contact from the user's contact list: Take a look at the Alert Dialog modal here However, there seems to be an issue with the delete button ...

cssreactjsnext.jsradix-ui