-
Posts
-
Hi,
When I view my phone on a 320px wide mobile phone emulator it does not look very good (Link) I have tried several kinds of media queries with Font Size & layout/location of text changes but nothing seems to effect the font size or layout at all, even in the slightest bit. I have tired placing this media queries in the Style.css and quick Css but makes no difference. I have also tried pasting several media css examples off the internet just to see what it would do and again nothing changed at all.
The problem is with the two lines of text that replaced the Enfold Logo.
.logo img { display: none !important; }
.logo, .logo a {
overflow: visible;
height: auto !important;
width: auto !important;}
.subtext > div {
line-height:18px;
}.subtext .second-line{
font-size: 16px;
position:relative;
left:40px;
color: green;
}I also have already tried these codes that was suggest by Enfold mediators but does not help
.phone-info {
font-size: 16px;
}@media only screen and (max-width: 480px) {
.responsive #top #wrap_all .container { width: 70%; max-width: 70%; }}Hi Renvato2!
Please add following code to Quick CSS
@media only screen and (max-width: 480px) { .subtext .first-line { font-size: 24px; } .subtext .second-line { font-size: 14px; }}Cheers!
YigitHi Yigit,
I was getting no response in the quick css so I moved it to the Style.css page and changed it a bit and I get better response in changing the text size but only to a point. I do not understand why it changes sometimes and not other times. And it does not change completely to the size I set?
Anyway no matter what size I set the text to the Menu Icon is always over one of the words. Is there anyway to move the menu Icons or adjust the text to avoid the menu Icon because changing text size alone does not work.
i just realized that the first line text size is not changing, only the second line is. The first line of text I could never adjust the size, color or style using css code for any screen size when I was creating the landing page. I finally figured out that the only way to change the first line text was to go to “Customize” under “Appearance” and then “Topography / Theme topography” from there I was able to make any change I wanted to the First Line only.
So how do I override that first line text size for mobile devices?
Thanks,
Russ
Hi!
Did you add the css media queries at the bottom of the Quick CSS? If not then you should. Please try this:
@media only screen and (max-width: 480px) { .subtext .first-line { font-size: 24px !important; width: 85%; } .subtext .second-line { font-size: 14px !important; width: 85%; } }Cheers!
Ismael
- The topic ‘Need help with 320px wide mobile phone display’ is closed to new replies.