-
AuthorPosts
-
February 22, 2016 at 5:12 pm #587289
Hello!
First of all: awesome Theme you’ve created!
I work for a community and we used Enfold as the theme for our new webside. Everything works fine so far but I have some questions regarding to the responsive design.
We use the Catalogue and Tab (…de/rathaus-2/ansprechpartner-2/) element on several pages but both elements get cut off on small media screens (in this case we used a Sony Xperia Z3 for testing). Is there a way to fix this problem or at least make the page horizontal scrollable on small screens?
On one page (…de/rathaus-2/wo-erledige-ich-was/) we also use a table created with the TablePress-Plugin (because we need a sortable table there). Although we enabled “Aktiviere das horizontale Scrollen, um das Ansehen großer Tabellen einfacher zu machen” in the TablePress Settings, the table gets cut off on mobile display.
Can you please help us?
February 22, 2016 at 5:22 pm #587307Da ich jetzt nicht weiß, ob mein Englisch auch 100%ig verständlich war, hier die Problematik nochmals in Deutsch:
Ich bin als Mitarbeiter einer Gemeinde dafür zuständig, den Relaunch unserer Homepage voranzutreiben. Das Grundgerüst (Frontpage + 15 Unterseiten) hat eine externe Agentur erstellt und hierbei Enfold verwendet (ein Child-Theme wurde ebenfalls von der Agentur angelegt).
Soweit funktioniert alles perfekt, nur auf manchen Seiten bzw. bei manchen Elementen des Page-Builders funktioniert die responsive Ansicht meiner Meinung nach nicht optimal. Aufgefallen ist es mir auf folgenden Seiten (Links im Private Content). Hier wird der Content auf kleinen Media-Screens am rechten Rand abgeschnitten. Bei einer Seite mussten wir auf TablePress zurückgreifen, da man hier die Tabelle sortieren kann. Auch hier ist das Problem, dass die Tabelle abgeschnitten wird, obwohl wir die Responsive Extension des Plugin installiert haben und mittels Shortcode angegeben haben, dass die Tabelle horizontal gescrollt werden darf.
Gibt es hierfür irgendeine Lösung oder Anpassung im CSS, die ich vornehmen kann?
Danke schon mal im Voraus!
February 24, 2016 at 8:40 am #588216Hey!
The below code is causing the issue please remove it and the content will look good on the pages.
just remove float:left!important;
@media only screen and (max-width: 767px) { .responsive .content .entry-content-wrapper { float: left !important; / } }
Best regards,
Vinay Kashyap- This reply was modified 8 years, 8 months ago by Vinay.
February 24, 2016 at 11:47 am #588299Hi Vinay,
THANKS A LOT!!! That did it! :-)
Only on the page (Link below) we still have the problem that some part of the content (navigation a-z) gets cut off. Basically it is just text with anchors leading to the according letters. It’s the only solution “faking” a Glossary that came to my mind.
Any advise for this problem would be great ;-)
February 24, 2016 at 7:08 pm #588590Hey!
Please enable custom class to the textbox in which you have a – z alphabits
http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
/* Float Glossary*/ .custom-class * { float:left; }
You can control it better using css if you change the structure of alphabets in text box
<span class="alphabet">A</span> instead of <strong>A</strong>
Using css you can style them better.
Cheers!
Vinay KashyapFebruary 25, 2016 at 12:00 pm #588958Hi Vinay,
thanks again for your advise!
It works fine as long as there are no linked letters. But as soon as I add a link anchor to some letters (for example “A” and “M”) they stand next to each other (no more alphabetical order). Furthermore there are no more blank spaces between the linked letters and on responsive displays they get moved under each other?
February 28, 2016 at 2:10 pm #590413Hey!
To do this
Use this html in a text box widget
<ul class="alphabits"> <li><a href="#"> a </a></li> <li><a href="#"> b </a></li> <li><a href="#"> c </a></li> <li><a href="#"> d </a></li> <li><a href="#"> e </a></li> <li><a href="#"> f </a></li> <li><a href="#"> g </a></li> <li><a href="#"> h </a></li> <li><a href="#"> i </a></li> <li><a href="#"> j </a></li> <li><a href="#"> k </a></li> <li><a href="#"> l </a></li> <li><a href="#"> m </a></li> <li><a href="#"> n </a></li> <li><a href="#"> o </a></li> <li><a href="#"> p </a></li> <li><a href="#"> q </a></li> <li><a href="#"> r </a></li> <li><a href="#"> s </a></li> <li><a href="#"> t </a></li> <li><a href="#"> u </a></li> <li><a href="#"> v </a></li> <li><a href="#"> w </a></li> <li><a href="#"> x </a></li> <li><a href="#"> y </a></li> <li><a href="#"> z </a></li> </ul>
Add this CSS in Quick CSS (Change the link style by adding style to .alphabits a )
.alphabits{ list-style:none; } .alphabits li{ display: inline-block; } .alphabits a { text-decoration:none; }
Best regards,
Vinay KashyapApril 20, 2016 at 10:12 am #618128Hi Vinay,
sorry for my late answer. Unfortunately your solution didn’t work :( But everything’s good now, we solved it with a simple table (see link below).
Thanks a lot for your help!!
Kind regards,
SebastianApril 22, 2016 at 5:17 am #619488June 2, 2016 at 10:46 am #641942Hi Rikard,
sorry for my late response! Yes, We’re okay now.You can close the ticket.
Thanks again!
Best regards,
SebastianJune 3, 2016 at 6:38 am #642404 -
AuthorPosts
- The topic ‘Issues with responsive design’ is closed to new replies.