Responsive issues with text - Support | Kriesi.at

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
September 10, 2015 at 8:22 am #500827

changeacademy
Participant

Hi there,

My newly launched site is experiencing issues with the text acting very strangely when viewed on mobile http://pepperjar.uk/.

Responsive is turned on.

This site is using a child theme.

I’ve disabled all plugins and that doesn’t seem to be what’s causing the problem.

Specifically, the text all ends up getting stacked into a super skinny column down the middle of the page or slightly right aligned instead of spreading out on the page properly.

when building the site I noticed that any CSS for the H1,H2, H3 text would only get picked up if in the quick CSS editor, and other stuff was OK in the child theme style.css file – not sure if this has anything to do with it?

Here is the CSS code inside the quick CSS editor ————————-

h1 {
font-family: georgia!important;
font-size: 50px!important;
font-weight: 200!important;
color: #9c9c9c!important;
text-transform: none!important;

}

h2 {
font-family: proxima-nova!important;
text-transform: none!important;
font-size: 24px!important;
text-transform: none!important;

}

h3 {
font-family: proxima-nova!important;
font-size: 20px!important;
font-weight: 200!important;

}

h4 {
font-family: georgia!important;
font-style: italic;
font-weight: 200;
}

span.avia-menu-text {
text-transform: uppercase!important ;

}

.main_color .avia-content-slider .slide-image{
display: none;
}

Here is the CSS code inside the child theme style.css file ——————————————————

/* header optin —————–*/
#headeroptin .mc-field-group{
position: relative;
padding-top: 28px !important;
}

#headeroptin .mc-field-group input{
float: left!important;
width: 34%!important;
height: 35px !important;
font-family: proxima-nova !important;
font-size: 14px !important;
margin-right: 10px !important;
margin-top: 10px !important;
}

#headeroptin .button{
float: right !important;
width: 22% !important;
height: 35px !important;
font-family: proxima-nova !important;
text-transform: uppercase!important;
font-size: 12px !important;
margin-top:10px !important;
margin-right: 12px !important;
background: #000000 !important;
color: #fff !important;
}

#headeroptin .button:hover {
background: #909090!important;
color: #fff !important;

}

/* headeroptin mobile responsive styles iPhone 5 (portrait)———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
#headeroptin .mc-field-group input{
float: left!important;
width: 30%!important;
margin-right: 15px !important;
margin-top: 10px !important;
}

#headeroptin .button{
float: right !important;
width: 25% !important;
height: 35px !important;
padding-left: 5px!important;
margin-right: 10px !important;
}
}

/* header optin iPads (portrait) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
#headeroptin .mc-field-group input{
float: left!important;
width: 30%!important;
margin-right: 15px !important;
margin-top: 10px !important;
}

#headeroptin .button{
float: right !important;
width: 25% !important;
height: 35px !important;
padding-left: 5px!important;
margin-right: 5px !important;
}
}

/* header optin copy —————–*/

.tag1 {
font-family: proxima-nova!important;
text-transform: uppercase!important;
font-size:16px !important;
text-align: center;
color: #ffffff;
margin-top:35px;
}

.tag2 {
font-family: georgia!important;
font-style: italic;
font-size:16px !important;
text-align: center;
color: #ffffff;
margin-top: 3px;
}

.hmtag {
font-family: georgia!important;
font-size: 24px;
font-style: italic;
line-height: 140%;
text-align: center;
font-weight: 200!important;
}

/* footer optin —————–*/
#footeroptin .mc-field-group{
position: relative;
padding-top: 28px !important;
}

#footeroptin .mc-field-group input{
float: left!important;
width: 34%!important;
height: 35px !important;
font-family: proxima-nova !important;
font-size: 14px !important;
margin-right: 10px !important;
margin-top: 10px !important;
}

#footeroptin .button{
float: right !important;
width: 22% !important;
height: 35px !important;
font-family: proxima-nova !important;
text-transform: uppercase!important;
font-size: 12px !important;
margin-top:10px !important;
margin-right: 12px !important;
background: #f05103 !important;
color: #fff !important;
}

#footeroptin .button:hover {
background: #000000!important;
color: #fff !important;

}

/* #footeroptin mobile responsive styles iPhone 5 (portrait)———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
#footeroptin .mc-field-group input{
float: left!important;
width: 30%!important;
margin-right: 15px !important;
margin-top: 10px !important;
}

#footeroptin .button{
float: right !important;
width: 25% !important;
height: 35px !important;
padding-left: 10px!important;
margin-right: 10px !important;
}
}

/* #footeroptin iPads (portrait) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
#footeroptin .mc-field-group input{
float: left!important;
width: 30%!important;
margin-right: 15px !important;
margin-top: 10px !important;
}

#footeroptin .button{
float: right !important;
width: 25% !important;
height: 35px !important;
padding-left: 10px!important;
margin-right: 5px !important;
}
}

/* footeroptin copy ———– */

.footertag1 {
font-family: proxima-nova!important;
font-size: 35px;
color: #ffffff;
line-height: 140%;
text-align: center;

}

.footertag2 {
font-family: georgia!important;
font-size: 22px;
font-style:normal!important;
font-weight: 200!important;
text-align: center;
color: #ffffff;
line-height: 120%;
margin-top: 15px;
}

.footertag3 {
font-family: georgia!important;
font-size: 22px;
font-style: italic!important;
color: #ffffff;
line-height: 120%;
margin-top: 15px;
}

.footertag4 {
font-family: georgia!important;
font-size: 16px;
font-style: italic!important;
text-align: center;
color: #ffffff;
line-height: 120%;
margin-top: 15px;
}

/*sidebar optin ——————–*/

#sidebaroptin .mc-field-group{
float: left;
width: 99%;
padding-top:10px;
}

#sidebaroptin .mc-field-group input{
float: left;
width: 97%;
height: 35px;
font-size:16px;
margin-left:5px ;
border-style: solid;
border-width: 2px;
border-color: #000000;
}

#sidebaroptin .button{
float: left;
width: 95% !important;
height: 35px !important;
font-size: 14px;
text-transform: uppercase;
font-family: proxima-nova !important;
background: #f05103;
color: #FFF;
margin-top: 10px;
margin-left:5px;
}
#sidebaroptin .button:hover {
background: #000000!important;
}

h3.widgettitle {
font-family: proxima-nova!important;
font-style: normal;
text-transform: uppercase;
font-size: 18px;
}

/* headerbox —————–*/

#headerbox {
border-style: solid;
border-width: 2px;
border-color: #ffffff;
margin-top: 50px;
margin-bottom: 50px;

}

.headerboxcontent {
padding-top: 15px!important;
padding-bottom: 15px!important;

}

.hbt1 {
font-family: georgia;
color: #ffffff!important;
font-size: 60px;
line-height: 120%;
margin-left: 15px!important;
margin-right: 15px!important;
text-align: center;
}

.hbt2 {
font-family: proxima-nova;
color: #ffffff!important;
font-weight: 200;
font-size: 24px;
line-height: 120%;
margin-left: 20px!important;
text-align: center;
}

.hbt3 {
font-style: italic;
}

———————————————————————–

September 10, 2015 at 11:44 am #500922
Yigit
Keymaster
Hey changeacademy!

Please add following code to Quick CSS
```
@media only screen and (max-width: 480px) {
.flex_column.av_one_full {
    padding: 0 20px 0 20px!important;
}}
```
Cheers!
Yigit
September 10, 2015 at 12:48 pm #500964

changeacademy
Participant

Thanks! That sorted it. x

September 10, 2015 at 1:04 pm #500978

Yigit
Keymaster

Hey!

You are welcome, we are always happy to help!
For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

Best regards,
Yigit
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Responsive issues with text’ is closed to new replies.