Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 22, 2016 at 5:12 pm #587289
    gemekiwei

    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 #587307
    gemekiwei

    Da 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 #588216
    Vinay

    Hey!

    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 #588299
    gemekiwei

    Hi 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 #588590
    Vinay

    Hey!

    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 Kashyap

    February 25, 2016 at 12:00 pm #588958
    gemekiwei

    Hi 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 #590413
    Vinay

    Hey!

    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 Kashyap

    April 20, 2016 at 10:12 am #618128
    gemekiwei

    Hi 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,
    Sebastian

    April 22, 2016 at 5:17 am #619488
    Rikard

    Hi,

    Ok great, so I’m guessing you are ok for now?

    Best regards,
    Rikard

    June 2, 2016 at 10:46 am #641942
    gemekiwei

    Hi Rikard,

    sorry for my late response! Yes, We’re okay now.You can close the ticket.

    Thanks again!

    Best regards,
    Sebastian

    June 3, 2016 at 6:38 am #642404
    Rikard

    Hi Sebastian,

    No problem, glad we could help :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Issues with responsive design’ is closed to new replies.