Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • March 3, 2015 at 10:33 am #405040
    mrijnders

    I have two questions regarding mobile browsing:

    1: Long words in special heading elements aren’t displayed properly. What can we do about it?

    2: We use the following layout:

    <li>
<ul>2/5 containing an image, 3/5 containing text</ul>
<ul>3/5 containing text, 2/5 containing an image</ul>
<ul>2/5 containing an image, 3/5 containing text</ul>
</li>

    When browsing on a mobile phone it shows: image, text, text, image, image, text. Is it possible to show: image, text, image, text, image, text?

    Thanks in advance

    • This topic was modified 9 years, 9 months ago by Yigit. Reason: fixed HTML
    March 3, 2015 at 12:40 pm #405084
    begrafiks

    Hi mrijnders ;
    I would imagine that you should use “”Media queries” and add the same elements in a different order for mobil.
    Here is how I’d imagine :

    For desktop :
    > Color section (with your custom id “your-desktop-color-section”
    2/5 containing an image, 3/5 containing text
    3/5 containing text, 2/5 containing an image
    2/5 containing an image, 3/5 containing text

    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 767px){
your-mobil-color-section{display: none !important;}
}

    For Mobil :
    > ANOTHER Color section (with your custom id “your-mobil-color-section”
    2/5 containing an image, 3/5 containing text
    2/5 containing an image, 3/5 containing text
    2/5 containing an image, 3/5 containing text

    /*Mobile and Tablet Portrait view */
@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
your-desktop-color-section{display: none !important;}
}
    March 4, 2015 at 8:25 am #405607
    Rikard

    Hi!

    Please try the following in your Quick CSS:

    @media only screen and (max-width: 767px) {
h1.av-special-heading-tag{
font-size: 30px !important
}
h2.av-special-heading-tag{
font-size: 24px !important
}
}

    Regards,
    Rikard

    • This reply was modified 9 years, 9 months ago by Rikard.
    March 4, 2015 at 9:54 am #405645
    mrijnders
    This reply has been marked as private.
    March 4, 2015 at 9:56 am #405646
    mrijnders

    Hi begrakis,

    Does that mean you have duplicated content on every page that you use this method on?

    March 4, 2015 at 4:02 pm #405820
    begrafiks

    Hi mrijnders ;
    I’m sure there would be many other ways to do.

    But if you have not an enormous amount of pages it can be done easily with Enfold :
    You create your first “Color section with the id (your-desktop-color-section)”
    add in it :
    2/5 containing an image, 3/5 containing text
    3/5 containing text, 2/5 containing an image
    2/5 containing an image, 3/5 containing text

    and just “duplicate” that “color section”
    change the id to “your-mobil-color-section”
    and change the layout to :
    2/5 containing an image, 3/5 containing text
    2/5 containing an image, 3/5 containing text
    2/5 containing an image, 3/5 containing text

    March 5, 2015 at 8:43 am #406261
    Ismael

    Hey!

    We edited the code above (https://kriesi.at/support/topic/two-questions-regarding-browsing-on-mobile/#post-405607), there are missing dots. ( Please replace the code. Remove browser cache then reload the page.

    Regards,
    Ismael

    March 5, 2015 at 10:00 am #406290
    mrijnders
    This reply has been marked as private.
    March 5, 2015 at 12:12 pm #406340
    Rikard

    Hi!

    Sorry, my initial code was wrong, please try the following instead: 

    @media only screen and (max-width: 767px) {
h1.av-special-heading-tag{
font-size: 30px !important;
}
h2.av-special-heading-tag{
font-size: 24px !important;
}
}

    Edit the 30 or 24 for a larger or smaller values for a larger or smaller font. Also, make sure to empty your browser cache and reload a few times after pasting the code.

    Cheers!
    Rikard

    • This reply was modified 9 years, 9 months ago by Rikard.
    March 11, 2015 at 10:27 am #409733
    mrijnders

    Hi,

    I tried to change the h2 to 20px, 16px and 14px, but it looks that the font doesn’t get smaller on an iphone lower than 20px. So some words still don’t fit on the page.

    March 11, 2015 at 12:55 pm #409786
    Yigit

    Hi!

    Please try adding following code to Quick CSS as well

    @media only screen and (max-width: 480px) {
h2.av-special-heading-tag{
font-size: 16px !important;
}
}

    Cheers!
    Yigit

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.