Jump to content

Archived

This topic is now archived and is closed to further replies.

rmaxsg

Responsive Text with Media Queries

Recommended Posts

rmaxsg
@media only screen and (max-width: 980px) {
.pl-area-wrap{
  .logotext{
    font-size:70px;
      }
  }
}
@media only screen and (max-width: 650px) {
.pl-area-wrap{
.logotext{
    font-size: 54px;
}
}
@media only screen and (max-width: 480px) {
.pl-area-wrap{
.logotext{
    font-size: 44px;
}
}
 
Actually is for my logo in textbox, i no sure what is wrong with this CSS. it does not seem to work.
 
Thank you :) 
 
 

Share this post


Link to post
Share on other sites
Jake

Hi rmaxsg - Where are you adding this code? I think perhaps it's the same issue as outlined here? http://forum.pagelines.com/topic/30582-how-to-override-media-queries-in-dms-pro/?hl=media+queries - Take a look at Danny's last response, I think it will point you in the right direction.


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
rmaxsg
Thank you Jake is wonderful, you point out. Tomorrow I will check it update here.

Danny use a id and class for visibility of section. no sure it will apply to my site.

@media (max-width: 767px) {
#site .hidy-phone {
display: none;
}
}

anyone have more suggestion will be greatful.

Share this post


Link to post
Share on other sites
Jake

You're very welcome rmaxsg"] - I'm going to shout out to @[member="Danny to look at this when he gets in as well. He has more experience with the media queries and will make sure you get pointed in the right direction!


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
Danny
Can you provide a link please.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
rmaxsg

Sure danny.

Website Link

 

I target the DesignerSG in textbox in header.

 

@media (max-width: 980px) {
#textboxmoa56s{
  .logotext{
    font-size:70px !important;
      }
  }
}
@media (max-width: 650px) {
#textboxmoa56s{
.logotext{
    font-size: 54px  !important;
}
}
}
@media (max-width: 480px) {
#textboxmoa56s{
.logotext{
    font-size: 44px  !important;
}
}
}

Share this post


Link to post
Share on other sites
Danny

Your code doesn't need to include the textbox ID, you can use it like this which should work.

 

@media (max-width: 767px) {
  .logotext {
    font-size: 40px;
    text-align: center;
  }
}
 
@media (max-width: 767px) {
  .logosubtext {
    font-size: 12px;
    text-align: center;
  }
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
rmaxsg

Thank you Danny!  you once again you solve my issue. Thank you so much Danny and @Jake  :D  .

Share this post


Link to post
Share on other sites
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×