using responsive fonts and control -, control +

DanDan · #1 May 18, 2016, 04:26 PM

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 · #2 May 18, 2016, 05:34 PM

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

DanDan · #3 May 18, 2016, 06:30 PM

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 · #4 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 · #5 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