Wordpress Themes - WP Forum at BFA - using responsive fonts and control -, control +

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)

- - using responsive fonts and control -, control + (http://forum.bytesforall.com/showthread.php?t=23481)

using responsive fonts and control -, control +

I am building a site using vw to make the fonts responsive but it will not work when I use control - or control + to enlarge or reduce the size of the site. Instead the font remains the same size. Using em, the font is reduced when hitting control - or + but on browsers with different displacement the font remains the same while the other features are responsive, causing problems. Is there a way around this issue to get the fonts responsive and still have control - and + to work?

Thanks,

Dan

1) what is the url
2) please provide an export of your Atahualpa settings

The temporary domain is http://impactdesign006.com/, the problem shows up with the eight boxes, Our Newest Promo Items, Wall Calendars, etc. Using em the text is not responsive but will shrink and expand using control - and +. Using VW the text is responsive but will not shrink or expand using control - and +.

Thanks!

Dan

this has nothing to do with the theme, it related to the CSS and I don't know if you can do what you are trying to do.

You might ask at wordpress.org or or somewhere like stackoverflow.com

here is a version of your code with no WP or theme in it you can playwith to see if you can find a solution.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">

<head>

<title>New England Calendar</title>

<style type="text/css">

div.home_box {

        display: block;

        width: 78%;

        max-width: 1680px;

        padding: 0% 10% 0% 12%

}



div.home_box_01 {

        float: left;

        width: 46%;

        padding: 0% 0% 0% 1%;

        border: 1px solid #a0a1a1;

        margin: 1%;

}





div.home_box_04 {

        float: left;

        width: 55%;

        padding: 11% 0% 0% 0%;

        font-family: kalinga,arial;

        font-size: 2vw;

        color: #2e3192;

        text-align: center

}



div.clear {

        clear: both

}

</style>



<body class="home page page-id-4 page-template-default" >



<div class="home_box">

        <div class="home_box_01">

                <div class="home_box_04">

                        Our Newest<br />

                        Promo Items

                </div>

        </div>

</div>



</body>

</html>

Thanks for the help. It looks like I will need to make a series of media queries to make rem coded text responsive and to work with control - and +, something I was hoping to avoid. It will make the css file huge. Using VW would eliminate lots of css code.

Thanks again,

Dan