What is causing the high values in a CSS mobile website?

Trying to make my WP website mobile-friendly, I implement the following:

@media screen and (max-device-width: 780px) {}

However, to ensure proper alignment, I find myself using large values such as font-size: 4em;, header {height: 200px;} (compared to 100 on desktop). Is this standard practice?

The issue is most noticeable with the Gallery plugin - where thumbnail sizes like 200x300 appear minuscule on mobile devices!

Is there a more effective method for optimizing websites for mobile viewing?

cssmobile

Answer №1

It seems like the issue might be related to the viewport settings on your website

<meta name="viewport" content="width=device-width, initial-scale=1"/>

In today's age, most smartphones have higher display resolutions, such as the iPhone 6 Plus with a 1080p screen. This means that if you set something to be 100px tall, it may appear very small on the screen due to the high dpi.

To address this, adjusting the viewport to device-width prompts the browser to render the page at a more standard dpi, ensuring that your content scales appropriately across different devices.

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

ChartJS is exhibiting an issue within a modal or popup window where the chart is being displayed with a height

I want to show a graph in a modal window when the user clicks a button. The modal is hidden with display: none;, and becomes visible with display: flex; once the button is clicked. If I move the chart outside of the modal, it works without any issues. Ad ...

javascriptcssvue.jsgraphmodal-dialog

Display a unique button and apply a strike-through effect specifically for that individual list item

I've encountered an issue with my code that is causing problems specifically with nested LI elements under the targeted li element: $('#comment-section .comment-box a#un-do').hide(); $('#comment-section ul li[data-is-archived="true"]& ...

javascriptjqueryhtmlcss

PNG file unable to display in Google Chrome

I created an image using paint.net and saved it as a .png file. However, when I try to display the image on my website, only the borders show up without any image content. Here is the code I used: HTML <a href="home.php"><img id="logo" src="../i ...

htmlcssimage

Applying jQuery .animate() to elements without specifying position: absolute

My goal is to create a website where clicking on an image triggers a dropdown menu. The jQuery method I'm using is as follows: function main() { $('#arrow').click(function() { $('.hidden').animate({ top: &a ...

javascriptjqueryhtmlcss

Is there a bug causing the Admin LTE content height issue? Looking for solutions to fix it

What's the reason behind the oversized footer? The footer appears normal when I resize or zoom the page, why is that? How can this be resolved? ...

cssadminlte

Is the Nopcommerce theme being upgraded from version 2.3 to 3.0?

I am new to nopCommerce and facing a challenge. I need to upgrade a nopCommerce 2.2 site to version 3.0, but only the theme. I already have two sites designed, and I want to apply the 3.0 theme to the 2.2 site. If it were just a simple HTML page, copying ...

cssthemesupdatesnopcommerce

Place a button next to a text input field using Bootstrap

How can I create a drop-down menu on the left side of my input text, featuring a '+' or '-' symbol? For example: [+][input text] <div class="form-group btm_border"> <label class="col-sm-4 control-label" for="first_name"&g ...

htmlcsstwitter-bootstrapbootstrap-4

The background image is failing to display, although other styles for the class or element are visible

Why won't the background image display, even though I have verified that the image path is correct and changing other properties like color or background color works just fine? Here is my CSS code snippet: .container { background-imag ...

htmlcssbackground-image

Tips for concealing the scrollbar on Firefox while still allowing scrolling within a div container

Is there a way to hide the scrollbar in Mozilla Firefox without preventing scrolling within a specified div? I have tried using the following CSS, however, I do not want to include "overflow-x: hidden" in the div that already has a scrollbar. Additionally ...

jquerycssarrayshtml

Providing space for a two-line title

It's a bit tricky to explain, so if anyone has a better title in mind, feel free to change it. I'm trying to create a black box behind my headline. I'm using a span inside the h-tag for this purpose, but I need to add some padding to the le ...

csspaddinghtml

Responsive Text and Alignment in the Latest Bootstrap 5

My goal is to center my div element while keeping the text aligned to the left. Here's the code I have: <div class="container"> <div class="row"> <div class="col"> <h1>< ...

htmlcssresponsivebootstrap-5text-styling

Creating a dynamic menu with Jquery can add a touch of flair to your website. Here's how you can

Interesting jQuery code: $(document).ready(function(){ var abc=''; $(".doa").on("click",function(){ var doa=$(this).val(); var doah=$(this).position(); abc=doah.top; var x=+doah.top-80; $(this).c ...

javascriptjqueryhtmlcss

Tips on modifying the background color using bb code

I am currently working on creating a custom bbcode system. My goal is to change the format from [bg=color code]color text[/bg] to <span style="background-color:color code;">color text</span> Do you have any suggestions on how I can achieve thi ...

phpcss

Ways to shorten text on mobile screens using CSS

Is it possible to use CSS to truncate text based on the current screen size or media queries? For example, consider this paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta tortor vitae nisl tincidunt varius. Lorem ipsum dolor ...

cssresponsive-designtruncate

Flex basis unexpected vertical overflow is not anticipated

I encountered an issue with my code snippet below: export default function Home() { const lists = ["List A", "List B", "List C", "List D"] return ( <div className="flex gap-3"> {lists.m ...

cssreactjsnext.jstailwind-css

Position the Bootstrap button at the bottom left with absolute placement

Currently, I am utilizing Django as my web framework and Bootstrap to enhance the rendering of the frontend. My goal is to implement an "add" button on my page that will always be in the bottom left corner regardless of scrolling, overlaying any other cont ...

htmlcsstwitter-bootstrapbootstrap-4css-position

Is it better to toggle animations or incorporate a class?

I'm currently working on a project where I am trying to create a slide-out menu. However, I've run into some issues because the .animate() function is not toggle-able. My plan was to use a CSS class and implement .cssToggle() instead, but unfort ...

jquerycss

What is the method for changing the placeholder color in a Chosen selection input field?

Within my jQuery v3 / Bootstrap v4.1.2 application, I am utilizing chosen.jquery (Version 1.8.7) and struggling to find the method to modify the placeholder text color in a Chosen selection input using CSS styles such as: ::-webkit-input-placeholder { /* ...

cssbootstrap-4jquery-chosen

Combining Bootstrap and @material-ui for a better UI experience!

Is there a way to apply Bootstrap classes to @material-ui components? For example, I am attempting to create a button and style it using both 'btn' and 'btn-primary' from Bootstrap. import { makeStyles } from "@material-ui/core&quo ...

cssnode.jsreactjsmaterial-uibootstrap-5

Is there a way to ensure that the tab character " " remains consistent in size within a textarea at all times?

My current challenge involves inserting tabs of the same size into a textarea. The example shows that the only variation in each line of the testString is the placement of the \t. However, when displayed in the textarea, the tab sizes differ dependi ...

javascripthtmlcss