-
AuthorPosts
-
March 3, 2015 at 10:33 am #405040
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, 8 months ago by Yigit. Reason: fixed HTML
March 3, 2015 at 12:40 pm #405084Hi 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 #405607Hi!
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, 8 months ago by Rikard.
March 4, 2015 at 9:54 am #405645This reply has been marked as private.March 4, 2015 at 9:56 am #405646Hi begrakis,
Does that mean you have duplicated content on every page that you use this method on?
March 4, 2015 at 4:02 pm #405820Hi 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 textand 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 textMarch 5, 2015 at 8:43 am #406261Hey!
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,
IsmaelMarch 5, 2015 at 10:00 am #406290This reply has been marked as private.March 5, 2015 at 12:12 pm #406340Hi!
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, 8 months ago by Rikard.
March 11, 2015 at 10:27 am #409733Hi,
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 -
AuthorPosts
- You must be logged in to reply to this topic.