Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #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?

    #587307

    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!

    #588216

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

    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 ;-)

    #588590

    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

    #588958

    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?

    #590413

    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

    #618128

    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

    #619488

    Hi,

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

    Best regards,
    Rikard

    #641942

    Hi Rikard,

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

    Thanks again!

    Best regards,
    Sebastian

    #642404

    Hi Sebastian,

    No problem, glad we could help :-)

    Best regards,
    Rikard

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