-
AuthorPosts
-
February 15, 2015 at 11:59 pm #396485
Hi,
I did some searches and found ways to hide content for mobile devices using CSS which is great but i also have a couple of sections where i use layout elements. eg. 1/3 page for a picture and 2/3 of text. Can i somehow remove the 1/3 element on mobile devices? its just too wide and not necessary anyway.
February 16, 2015 at 12:08 am #396489Hi erron ;
I think you should add a css class field to your element (1/3).
You can find more information http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/February 16, 2015 at 3:48 pm #396757Hi!
Can you point out the layout elements you would like to remove on mobile please? :)
@begrafiks thanks :)Cheers!
YigitFebruary 16, 2015 at 11:46 pm #397164Yigit, there are a few but as an example, when you scroll down to the first section of text where it has a menu for ‘about’, ‘History’ etc, this menu loads a post, in the post are the elements. Would like to remove the left side one (which is the same in every post anyway) on mobiles only.
hope that made sense.
February 17, 2015 at 12:24 pm #397407Hey!
Enclose the content inside a unique div container. Add a custom css class. For example:
<div class="hide-mobile"><p class="condensedlines">Centina is the culmination of a family run business that has been operating in the South Australian construction industry since 2007.</p> <p class="condensedlines">Our vision is to become the company of choice in the South Australian construction market by delivering a multifaceted approach to construction and development. We understand that project delivery on time, on budget and to the highest quality standard is crucial to all clients and we aim to deliver on these critical areas to ensure a successful project.</p> <p class="condensedlines">Our values are simple- trust, quality honesty and craft. We deliver these values everyday through our work and in person.</p></div>
We added the <div class=”hide-mobile”> container. Now, add this to the Quick CSS field to hide the content:
@media only screen and (max-width: 767px) { .hide-mobile { display: none; } }
Cheers!
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.