Wordpress Themes - WP Forum at BFA

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)

DanDan May 18, 2016 04:26 PM

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

juggledad May 18, 2016 05:34 PM

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

DanDan May 18, 2016 06:30 PM

1 Attachment(s)
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

juggledad May 18, 2016 08:20 PM

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>


DanDan May 19, 2016 04:42 AM

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


All times are GMT -6. The time now is 01:22 AM.

Powered by vBulletin® Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.