Opt to not show page items in responsive for mobile phones

rigogs · March 2017

Using BeTheme Business. Is there a way to change responsive Muffin Builder items order? would like left Column (1/4 width) to show after Column 3/4 width (holds page text) during progressive page sizing for mobile devises.

As iphone example would like to see (1) Logo, (2) 3/4 column and then (3) 1/4 column when we look at page on iphone. Basically changing the order of items as it shows when the 480pix width triggers.

Thanks for help!

Bryan · March 2017

Hi,

Sorry but this is not possible to achieve with theme options.

thanks

rigogs · March 2017

Each Muffin Builder item has value options for Custom Classes and Styles, can't these be set to move order in mobil css? or at the very least to not show items based on trigger point for mobil css... please help!

View http://www.onthespotus.com on phone or narrow browser below 480px, all we want to do is move the Quick Links below the next item or just hide it--our footer has quick links. Thank you.

rigogs · March 2017

Your help is appreciated, hiding our Quick Links item from the Muffin Builder under the mobile ccs would work for us. How can it tag it to hide...? TKX

Bryan · April 2017

You can use this CSS to hide the quick links on mobile

@media (max-width: 767px) {
    #text-4 {
	display: none !important;
    }
}

rigogs · April 2017

Thank you for being there for us! added code to BeTheme Options > Custom CSS > CSS and still showing Quick Links in mobile. This is the "one-fourth column" area we are trying to hide when the 480pix triggers mobile, do we have to target it in another way?

<div class="column mcb-column one-fourth column_column column-margin-"><div class="column_attr clearfix animate fadeIn" data-anim-type="fadeIn" style=""><h2 style="margin-bottom: 25px;">Quick Links</h2>

<li><a href="http://www.onthespotus.com/event-calendar/">Event Calendar</a></li>

<li><a href="http://www.onthespotus.com/overview/download-zone/">Download Zone (p: ppeocppeoc)</a></li>

<li><a href="https://d9.darwinet.com/dnet410/client.asp">DNet Clients</a></li>

<li><a href="https://d9.darwinet.com/dnet410/employee.asp">DNet Employees</a></li>

<li><a href="http://www.onthespotus.com/overview/time-and-attendance/time-and-attendance-solutions/">Time & Attendance</a></li>

<li><a href="http://www.onthespotus.com/about/partner-zone/">Partner Zone</a></li>

</ul>

This is what I currently have in Custom CSS:

/* Blog SM share box background */

.single .share_wrapper {

background: transparent !important;

border:none !important;

}

/* Hide Quick Links in phone view */

@media (max-width: 767px) {

#text-4 {

display: none !important;

}

Thanks again for your help, Rigo

Bryan · April 2017

It shows you quick link on mobile because of the browser cache, please clear it.

rigogs · April 2017

I see what you mean, you targeted the 4th widget in footer section. We want NOT show Quick Links on top of page, the section right below main slider. We would like to have Slider, (no QL) and then Main page section.

Sorry about confusion, good call on cache

Rigo

Bryan · April 2017

Ok, I understand. If you want the top quick links to be gone on mobile you would have to add a custom class to the section because I have no way of targeting this element with CSS. Read more here about section options: http://themes.muffingroup.com/betheme/documentation/#section

rigogs · April 2017

Thanks for your help, read instructions, and after a couple times of trial-n-error got it to work.

/* Hide Quick Links in phone view */

@media (max-width: 767px) {

.QuickLinks {

display: none !important;

}

Thanks again for being there! Rigo

Opt to not show page items in responsive for mobile phones

Comments