6

Currently when my site is visited from a phone, elements are rearranged. For example, the menu moves from the side of the site to the bottom. How do I stop the layout of the site from changing when viewed from a phone?

2 Answers 2

6

What you describe is called "Responsive Design". Most new websites include this tecnique:

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

(Wikipedia)

It usually works by adding CSS media queries; a kind of "if" statements for CSS files that applies specific rules depending on the screen size of the viewing device. This article has a good example on how this works.

A CSS media query might look like this:

@media all and (max-width: 1000px) and (min-width: 700px) {
  p {
      color:red;
  }
}

This example will make any p element red for screen widths between 700px and 1000px only.

I would not recommend disabling this feature, unless it really messes up your design and makes your website unreadable on small screens.

How to disable the responsive design depends on how your template is designed. Many template providers (RocketTheme, Shape5 etc.) has an option in the template settings where you can change between Responsive and fixed width layout.

3

It mainly depends on your front-end template.

Responsive templates usually define "mobile" positions that are shown only for phones and tablets. The idea is to have a way to display content in different ways according to the device.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.