Disable responsive motif

  • ajrobson · Member ·

    Hi, I am using the Motif theme and I would really like to disable the responsiveness of this theme as I love the way my site looks on desktop but hate the way it looks on tablet and mobile. Is anyone able to help? Thanks.

    http://stand2pitch.co.uk/

    The blog I need help with is stand2pitch.co.uk

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

  • designsimply · Member ·

    May I ask in particular what you don’t like about how it looks on tablet and mobile? I’m just curious on that.

    In general, I would not advise disabling the responsive design in the theme. However, it can be done but it will take you some work to sort it out and I can give you some instructions about how to do it to get you started if you’re really interested. Before that though, are you sure I can’t convince you to leave the responsive design in place? Responsive designs are thoughtfully applied by theme authors to make the theme readable and easy to use on mobile. Even though it looks a bit different than the desktop view, usability usually trumps a hard-to-read design on mobile for most website visitors.

  • ajrobson · Member ·

    Hi thanks for the response. I don’t like what happens to the menu bar, it moves on to two lines, and looks even worse still on mobile. I would just generally like the site to look the same on all formats,

  • designsimply · Member ·

    I’m glad you told me the reason! That is not happening because of the responsive design, it’s happening because of some of the custom CSS that you have added.

    To see what I mean, go to Appearance > Customize > CSS editor, remove the following two blocks of CSS, and click the mobile preview icon at the bottom middle of the screen to see how the site should look on mobile by default.

    Remove all of this:

    .main-navigation ul li#menu-item-105 {
	border-left: 3px solid #fff
}
.main-navigation ul {
	list-style: none;
	margin:0;
	padding:px 0
}
.main-navigation ul li {
	float: left;
	position:relative;
	padding:0;
	margin:0;
	border-right:3px solid #fff;
	background:# }
.main-navigation ul ul li {
	border: none;
	background:#a8adad
}
.main-navigation ul li a {
	text-align: center;
	display:block;
	text-decoration:none;
	font-size:15px;
	color:#0000;
	padding:0 53.5px;
	line-height:px
}
.main-navigation ul li:hover a {
	position: relative;
	background:#931616;
	color:#eee
}
.main-navigation ul ul, .main-navigation ul li:hover ul ul {
	position: absolute;
	display:none
}
.main-navigation ul ul li:hover ul, .main-navigation ul li:hover ul li:hover ul {
	display: block;
	top:0;
	left:100% }
.main-navigation ul li:hover ul {
	display: block;
	position:absolute;
	left:0;
	top:100%;
	width:0;
	height:auto;
	margin:0;
	padding:0;
	box-shadow:0 4px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.15) inset
}
.main-navigation ul ul {
	background: #777
}
#navigation ul ul ul {
	background: #e4e4e4 !important;
	border-color:#e4e4e4!important;
	margin-left:-14px
}
.main-navigation ul ul li a {
	float: none;
	width:156px;
	line-height:normal;
	font-variant:normal;
	font-weight:400;
	font-size:14px;
	text-transform:none;
	padding:6px 10px;
	background:none !important
}
.main-navigation ul ul ul li a {
	color: #fff;
	font-weight:700
}
.main-navigation ul ul li:hover>a {
	background: #931616 !important;
	color:#fff !important
}
.main-navigation ul ul ul li:hover>a {
	background: #fff !important;
	color:#fff !important
}

    And remove this:

    .main-navigation {
	margin: 5px
}
.main-navigation ul a {
	padding-bottom: 0;
	padding-top:0;
	line-height:40px
}

    If you want to keep using that CSS for large screens but don’t want it to mess up the responsive design like it’s doing now, then you can add the snippets above back to your custom CSS, except make sure to put it inside a media query rule.

    If you put that CSS after this:

    @media screen and (min-width: 601px) {

    And before the closing curly brace:

    }

    That should keep that code from making the menus display all skewampus on mobile.

    Would you be willing to give that a go?

  • ajrobson · Member ·

    I have taken out the code which you have suggested but cannot see any difference when using the tablet and mobile viewers in customizer??

  • ajrobson · Member ·

    I have taken out the code which you have suggested but cannot see any difference when using the tablet and mobile viewers in customizer??

  • ajrobson · Member ·

    Okay, I have made the necessary changes so my nav menu now looks how I want it on a tablet. However when I go to add the codes for the snippets I want for desktop only, using your advice above I can’t get it to work. Any ideas??

  • hallluke · Member ·

    It seems like the code you’ve added for larger screens is working. The header image is floated to the right and the other header elements are repositioned and the margins altered. What differences were you expecting to see and which bits of code did you think would work for each change?

  • designsimply · Member ·

    I have taken out the code which you have suggested but cannot see any difference when using the tablet and mobile viewers in customizer??

    I was looking at mobile before, as a test. Maybe I didn’t get enough of the code? Actually, it sounds like you wrote all of your past CSS with desktop sized screens in mind, so I think you should try putting all of your previous customizations into the large screen media query and changing it from “min-width: 601px” to something larger and then write new CSS to adjust the mobile and tablet views as needed from there. I noticed the theme uses “min-width: 1200px” so I would recommend starting with that.

    If you can get your past-written CSS moved into a media query limiting it to large screens, then I can help you look at the default responsive design views the theme was intended to have and help you customize them from that point. Does that sound good?

  • The topic ‘Disable responsive motif’ is closed to new replies.