响应式设计受到挤压

Question

请记住，我只能通过使用类（Wordpress）来尝试修复此问题，是否有人知道这有什么问题。我正在尝试创建一个带有分色/照片背景的文本框 - 我通过应用课程添加了这个。接下来，我试图将文本排成一行，使其位于背景颜色部分的前面。

这是严重错误的地方。

我设计这个是响应所以尝试使用ems，vws，pc，都无济于事。笔记本电脑屏幕上的一切看起来都很好，然后在Ipad上，文字显示被挤压。下面的问题是它应该如何看的png图像。感谢。

这是页面链接：

http://dbtest.destinationballybunion.ie/?page_id=3458

以下是我应用的CSS类：

.beachboxa {
background-image: url('http://dbtest.destinationballybunion.ie/wp-content/uploads    
/2014/09/WIDE-FISHING-BLOCK.png');
background-repeat: no-repeat;
background-size: cover;
}

.beachboxa h3 {
font-size: 36px;
line-height: 100%;
}

.beachboxa h3 {
margin-right: 7.639em;
margin-left: 2.083em;
}

.beachboxa h6 {
font-size: 12px;
}

.beachboxa h6 {
margin-right: 17.500em;
margin-left: 6.250em;
}