Disable the Responsiveness of Theme (Adaption) / Disable Mobile Theme view

  • Unknown's avatar
    basirawebsite · Member ·

    Hi,

    I’m having a problem with this wordpress website: http://www.basira.org.uk – when the zoom is set too high on an internet browser, it seems to show the mobile version of the website, instead of the desktop one.

    This is an issue because on the mobile version, the logo of the organisation and the sidebars showing information about our upcoming events cannot be seen.

    Can anyone suggest how I can stop the theme from being responsive to screen size in this way?

    I spoke to wordpress support and they suggested that I come here for help. I also have the custom design upgrade, therefore I could change things in the css if necessary, but I don’t know what to change.

    Any help would be greatly appreciated.

    Many thanks.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    @basirawebsite, given the way the Adaption HTML is structured, making the sidebar and header image visible would be quite difficult. I would suggest looking for another responsive theme where the sidebar is not hidden. Normally on responsive designed themes, the sidebar is moved down below the content for tablets and mobiles, but on Adaption it is hidden for mobiles and tablets.

    Also, transforming a responsive width theme into a fixed width is a very, very large job.

  • Unknown's avatar
    designsimply · Member ·

    when the zoom is set too high on an internet browser, it seems to show the mobile version of the website, instead of the desktop one

    This is normal.

    This is an issue because on the mobile version, the logo of the organisation and the sidebars showing information about our upcoming events cannot be seen.

    I think you can make a smaller adjustment to solve this problem without getting rid of all of the responsive design outright, which is indeed an advanced task and would take you some work to sort out if you decided to do it. Instead though, I would recommend trying out the following example first to see if it works for you as a solution. This example affects tablet-sized screen views, which is what the browser automatically starts showing when you zoom a lot. Try it out by adding it to your Appearance > Customize > CSS editor to see what you think:

    @media only screen and (min-width: 641px) and (max-width: 64.063em) {
	#masthead,
	#masthead:before {
		width: 25%;
	}

	body.secondary-sidebar #masthead,
	body.secondary-sidebar #masthead:before {
		width: 20%;
	}

	#masthead {
		display: block;
		float: left;
		font-size: 90%;
	}

	#masthead:before {
		background: #fafafa;
		bottom: 0;
		content: '';
		position: absolute;
		right: 75%;
		top: 0;
		z-index: -1;
	}

	#content, #content:before {
		width: 75%;
	}

	#content {
		float: left;
	}
}
  • The topic ‘Disable the Responsiveness of Theme (Adaption) / Disable Mobile Theme view’ is closed to new replies.