Maintain the current layout, but reduce its size on mobile devices

For quite some time, I have been struggling to make my website mobile-friendly. Despite using a grid layout, the website looks terrible when viewed on phones.

All I want is to scale down the desktop version to half the size when accessed on phones.

I've experimented with zoom:0.5; and transform:scale(0.5);, but unfortunately, neither has produced satisfactory results. Does anyone know how I can solve this issue?

Currently, I have included 

<meta name="viewport" content="width=device-width, initial-scale=1" />
, but I have also tried removing it without success.

You can visit the website here:

Here is the link to my grid: https://github.com/joelfolkesson/jf/blob/master/style.css

javascriptjqueryhtmlcss

Answer №1

When reducing the size of your website content, it may become difficult to read on smaller screens.

To address this issue, consider using media queries in your CSS to adjust the scale of your website based on different screen sizes specified in these media queries.

If you're short on time, utilizing Twitter Bootstrap is a good option as it offers responsive CSS that can easily adapt to various devices for a mobile-friendly design.

For inspiration, take a look at this site which was created using Twitter Bootstrap.

UPDATE: If maintaining the same layout as the desktop version on mobile is important to you, consider adjusting your CSS media query specifically for your menu and logo to ensure readability on mobile. Avoid using zoom: 0.5;.

Increase the size of your logo for mobile to around 75%, adjust your menu items to be 100% width or explore alternative styles for them. You can arrange your menu items in a grid format with 33.3% width (split into 3 sections) or decrease padding and use a grid with 16.6% width (split into 6 sections) to accommodate larger text.

If you need further assistance, clarifying your stylesheet naming conventions would be beneficial for clearer communication.

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

What methods can I use to ensure this car rotates smoothly, whether or not I combine meshes in Three.js?

My current challenge involves creating a car game here. The issue is that although the wheels are rotating, they are not moving in sync with the car itself. Here is the code snippet from my car.js file: export function createCar(x, y, z, color) { const ...

javascriptthree.jsrotation

Why does IntelliJ IDEA 2016 show an error for using the [ngSwitch] attribute in this Angular2 template?

Every time I run precommit inspections, I receive a barrage of warnings even though everything seems to be functioning properly. The warnings include: Warning:(8, 58) Attribute [ngSwitch] is not allowed here Warning:(9, 42) Attribute [attr.for] is not all ...

javascriptintellij-ideaangular

Setting the title of a document in Angular 5 using HTML escaped characters

It seems like a simple problem, but I can't seem to find an easy solution. Currently, I am using the Title service to add titles to my documents and everything is working fine. You can check out the documentation here: https://angular.io/guide/set-doc ...

htmlangulartypescriptangular5

Google Chrome introduces innovative composite layers to handle stubborn content resistant to compression

I'm trying to understand the meaning behind the message in the Chrome profiler that says "Layer was separately composited because it could not be squashed." Recently, while modifying my HTML, I added a fixed position div inside a relative div and app ...

htmlperformancegoogle-chromegoogle-chrome-devtools

Can Three.js be used to create a compact canvas?

I've successfully implemented a three.js scene on my website where users can drag to rotate an object. However, I don't want the scene to take up the entire webpage. I tried adjusting the field parameters with the following code: renderer.setSiz ...

javascripthtmlcssthree.js

What exactly is the significance of the code snippet "var data = jQuery(msg), script;" in JavaScript?

this snippet is extracted from a Google Chrome extension "search" == request.ajax && $.ajax({ url: request.url, type: "GET", dataType: "html" }).done(function(msg) { if (msg.indexOf("https://login.testabc.com/ ...

javascriptnode.js

Displaying a Laravel variable in an Ajax callback to trigger a separate Ajax function

What I am attempting to accomplish here is quite complex. I aim to utilize one Ajax function across my website to manage information updates. Essentially, a universal update script that will trigger upon form submission. The challenge I am facing is that ...

jqueryajaxlaravellaravel-5

Is it feasible to dynamically insert and delete elements in React?

I'm currently in the process of rebuilding a project, specifically a drag and drop website builder, using React after it was originally built with a heavy reliance on jQuery. My main challenge lies in being able to dynamically add and remove elements ...

javascriptjqueryreactjs

Struggling to create responsive embedded videos?

https://i.sstatic.net/R0GUn.jpgI have successfully created a responsive video, but there seems to be an issue with the width to height ratio when the browser is fully stretched. The iframe appears narrow and tall in this situation. However, when the browse ...

htmlcss

Modifying the background image of the <body> element in CSS to reflect the season based on the current month in the calendar

I'm struggling to change my HTML background based on the date. The code I've tried isn't working as expected and I can't seem to find any relevant examples to guide me. My goal is simple - I want the background of my HTML page to be ch ...

javascripthtmlcsscomparison-operators

Received an error stating "Uncaught TypeError: Unable to access the property 'PropTypes' of undefined" while encountering problems with React Bootstrap. Additionally, facing issues with ReactDOM not being defined due to

Currently, I am in the process of developing a React-JS website with Express handling the backend. For authentication, I am utilizing react-router and react-stormpath. I have also incorporated webpack into the project. However, I have encountered some ch ...

javascripttwitter-bootstrapreactjsreact-dom

Move the div with jQuery

I am currently working on making a div draggable without relying on jQuery UI. Here is the HTML code: <div class="wrapper"> <div class="toddler"></div> </div> And here is the script I have written: $.fn.slider = function () { ...

jqueryhtmlcss

Transforming a typical JSON file into a parent-child hierarchical JSON structure similar to the one utilized in d3's flare.json file format

My JSON file has a specific structure: { "a": "b", "c": "d", "e": { "f": "g", "h": "i" } } I want to transform it into the following structure: { "name": "Root", "parent": "null", "children": [ { ...

javascriptjsontypescript

Guide to displaying a function result in Vue 3

I have just started learning vue js and I am facing an issue. I want to display the value returned by the following function in a table row: The function is: getGroup(id){ this.users.forEach(element =>{ if(element.id===id) ...

javascripthtmlvue.jsvuejs3

Issue with CSS margin-top not displaying properly in Firefox and Internet Explorer, but working fine in Chrome and Opera

I'm encountering difficulties with the margins on my website. It seems like margin-top isn't functioning properly in Firefox and IE, even though it is working correctly in Chrome and Opera. Despite trying various techniques and searching online f ...

htmlcssinternet-explorerfirefoxgoogle-chrome

Transcode Byte Array into Base64 String Using AngularJS

I am receiving a byte array in the service response, and I need to display that image in an image field on my HTML page. Can anyone provide guidance on how to implement this? I have searched for solutions on Stack Overflow but have not found a valid soluti ...

javascriptangularjscordovabase64arrays

There seems to be an issue with the CSS header alignment as the logo is not properly positioned using a top margin of -20px

My goal is to create a header bar that includes an image, a title, and a menu car. I want the bar to be displayed after scrolling 50px down, and I also want the image to be positioned slightly above the wrapping div, showing a bit of it in the top 50px. Ri ...

css

Using jQuery UI Date Picker to Show a 5-Digit Year in a Dropdown Menu

I'm not interested in solving the deca-millennium bug (which won't affect us for another 8,000 years ;)) but I do want to show the 5-digit year on the date-picker widget for users to see (which is amazing, by the way). For example, 02005, 03013. ...

jquerydatepicker

JQuery .click Event doesn't center elements even with transform-origin adjustment

In the JSfiddle provided below, you can see that after a click event occurs, two span (block) elements rotate 45deg to form an "X". However, both elements are slightly shifted left, creating an off-center "X" relative to the parent's true center-origi ...

javascriptjquerycsscenter

Deciphering HTML within a Vue attribute: Tips and tricks

I'm having trouble converting some code to Vue. There seems to be a rendering difference in the alt attribute of an image, and I can't figure out how to interpret the html within the attributes. I've searched for solutions but haven't f ...

javascriptimagevue.jsvuejs2vue-component