What steps can be taken to troubleshoot issues with "responsive-design mode" on mobile devices specific to a Wordpress theme?

Currently using a Wordpress theme in responsive design mode. The website looks great on iPad, including the desktop version, but when viewed on an iPhone it gets messy. I need assistance in replicating the iPad style for all mobile devices, as well as non-desktop versions, while completely removing the smartphone styling. I want the exact layout of the iPad to be duplicated for smaller mobile screens. The theme author suggested checking the "responsive-all.css" file to make changes, but I'm not very familiar with CSS. Here is the link to the CSS file: responsive-all.css

Any help would be greatly appreciated. Thank you. Michael

iphonecsswordpressresponsive-design

Answer №1

First Step: To remove the mobile view, simply comment out or delete the corresponding CSS code at the end of the file:

/*
* -------------------------------------------------------------------------------------------
* MOBILE VIEW
* -------------------------------------------------------------------------------------------
*/    @media only screen and (max-width: 767px) {
...

Second Step: Next, adjust the conditions to ensure a consistent design for tablets and smartphones:

/*
* -------------------------------------------------------------------------------------------
* TABLET AND SMARTPHONE STYLES
* -------------------------------------------------------------------------------------------
*/   @media only screen and (max-width: 979px) {

After these changes, it's important to customize the mobile and tablet views according to your specific requirements.

Answer №2

` section, you can opt to enhance the appearance of iPhones and various mobile devices by substituting your existing viewport meta tag with the code provided below: 
<meta name="viewport" content="width=768">

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

Is there a way to detect if JavaScript is disabled using a unique CSS selector?

Does anyone know of a CSS selector that can be used when JavaScript is disabled? I'm not referring to the noscript tag, but specifically in CSS. ...

csscss-selectors

What's the best choice for ASP.NET: Using CSS or Themes?

What are the differences between using ASP.NET Themes and CSS for web design? When is it most beneficial to use each approach, and what are the advantages and disadvantages of one over the other? ...

asp.netcssthemes

Preventing checkbox selection with CSS

Can CSS be used to deactivate clicks on checkboxes while still maintaining their functionality for dynamically setting values using Javascript? I have not been able to find a suitable solution. pointer-events:none Unfortunately, this did not work as expe ...

htmlcsscheckbox

Aligning Text to the Right Using CSS

HTML <body> <div class="menu_items"> <h1>My Heading</h1> <nav> <a>Item 1</a> <a>Item 2</a> <a>Item 3</a ...

css

What seems to be the issue with my 2-column design layout?

When I try to arrange my webpage with a 2 column layout, adding an image messes up the footer. Without the image, the footer looks correct. <!DOCTYPE html> <html lang="en"> <head> <title>SuperRestraunt</title> ...

htmlcss

Increasing the size of iframe in a Flexbox layout

I'm facing a challenge in making the iframe element stretch to occupy the remaining space within my web application. While I have ensured that the maximum space is allocated for the div by setting a border, the iframe's height does not automatica ...

htmlcssiframeflexbox

Preventing the element from breaking when it is not the child: Tips and Tricks

In order to align both .quote-container and #new-quote elements in the same line, even when the window width is very small (e.g., 83 pixels), I used min-width on the .quote-container element successfully. However, applying the same technique to the #new-qu ...

htmlcss

Is it possible to create a dropdown menu that exceeds the width of its parent column?

I currently have a dropdown that contains 3 main "categories," each of which includes multiple checkboxes for search filtering purposes. Here is an example snippet of the code: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4. ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Tips for adding a text input field within a dropdown menu

Could someone provide guidance on how to place an input text box within a dropdown without using bootstrap? I came across this image showing what I am looking for: https://i.stack.imgur.com/f7Vl9.png I prefer to achieve this using only HTML, CSS, and Jav ...

javascripthtmlcss

The value within the style.setProperty function does not get applied

I have a progress bar that dynamically increases based on user input: <div class="progressBarContainer percentBar"> <div class="progressBarPercent" style="--width:${gPercent}" id="${gName}-pbar">< ...

javascripthtmlcssdocument

Having trouble with custom padding for b-sidebar in VueJS?

I am struggling with adding padding to the sidebar using bootstrap-vue. When I attempt to add padding in the browser devtools, it works perfectly fine. However, when trying to implement the same code, it doesn't reflect on the actual webpage. I tried ...

cssvue.jspaddingsidebar

Styling list items (li) on hover without using the li:

I have a menu where I am using the :after element. When I hover over a li in the menu, the hover effect also includes the :after element. HTML: <ul class="main-menu"> <li class="active"><a href="">Menu</a></li> <l ...

htmlcsshoverhtml-lists

What steps can I take to avoid horizontal scrolling on mobile due to a table overflowing?

My website displays a table within a bootstrap container, row, and column. While everything looks good on larger screens, the content within the table is causing a horizontal scroll on smaller screens, making the footer look distorted. This results in a me ...

javascripthtmlcss

problem involving flexbox columns

When working with a flex grid and trying to add padding to some columns, it seems that the padding is affecting the width of the columns. I attempted to add the padding to an inner wrapper, but since it's based on percentages, this solution doesn&apo ...

cssflexbox

The dilemma with WordPress button hover effect in CSS

Looking for some help with CSS code to create a button that changes color on mouse-over, transitioning from: white background to black background black text to white text Any assistance would be greatly appreciated! Here is the CSS I have tried so ...

css

How can I position a Font Awesome icon in the center of an image with Bootstrap 3?

I'm attempting to center a font-awesome icon on top of an image within bootstrap 3. Below is the image code enclosed in a div: <div id="quickVideo"> <a data-fancybox href="https://player.vimeo.com/video/153113362?autoplay=1&color=54 ...

javascriptjquerycsstwitter-bootstrapfont-awesome

Sometimes onblur is triggered repeatedly, other times it doesn't fire at all

Currently, I am developing an interactive web application that is accessible at (login: [email protected], password: demo). This application allows users to move items from the left column to the workspace on the right, where they can resize and edit ...

javascriptjqueryhtmlcss

Combine linear and radial background effects in CSS styling

I am trying to achieve a background design that includes both linear and radial gradients. The linear gradient should display a transition from blue to white, while the radial gradient should overlay a polka dot pattern on top of it. I have been following ...

htmlcssbackgroundlinear-gradientsradial-gradients

Using Bootstrap 4 to split lengthy text into multiple columns, similar to how it is done in Microsoft Word

Is there a way in Bootstrap4 to create MS Word-like multicolumn text flow? For example, in Word we have: https://i.sstatic.net/buCXu.png In Bootstrap4, the code below will generate a two-column grid: Example: <div class="row"> <div ...

htmlcssbootstrap-4

Swapping out bullet points for delicious food icons in an unordered list on an HTML page

I am working with the following code snippet: <div id="instructions"> <h3>Get it done</h3> <ol> <li>In a blender add the eggs, chocolate powder, butter, flour, sugar and milk.</li> <li>Then whisk ...

javascripthtmlcsstags