Extra Spacing After Video Before Text Since Upgrade From Andrina-Lite

The following code worked perfectly in the Andrina-Lite version, but now has an extra space after the video before the text. If I remove the <p align="justify"> it removes the extra spacing but leaves the text unjustified.

Code:

<iframe width="282" height="210" src="https://www.youtube.com/embed/YDydoUIFjJw" frameborder="0" allowfullscreen></iframe>
<p align="justify"><strong>HVAC</strong> (heating, ventilation, and air conditioning) is the technology of indoor environmental comfort.  Personal comfort depends on the control of humidity and air flow, as well as room temperature.  HVAC systems control all of these factors.  It's the job of the HVAC contractor to make sure the system is functioning appropriately so that it keeps your environment comfortable.</p>

 

I resolved this issue by removing the <p align="justify"> and </p> code from above and adding the following to the custom css.

Code:

.bottom-feature .bottom-feature-right {
text-align:justify;
}

 

Upon further testing, I found that justifying is causing a problem with the rendering of text on the responsive version. Some of the text on the right side is being cut off.

Is that why the change was made from the Lite version to the Pro?

The justified text looks best on normal display as in the Lite version, but the centered text looks better on the mobile devices (responsive).

How would I change the code above to not apply to mobile devices?

 

Hello,

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

@media only screen and (max-width: 960px) and (min-width: 767px){
.bottom-feature .bottom-feature-right {
text-align:center;
}
}
 
@media only screen and (max-width: 767px) and (min-width: 480px){
.bottom-feature .bottom-feature-right {
text-align:center;
}
}
 
@media only screen and (max-width: 480px){
.bottom-feature .bottom-feature-right {
text-align:center;
}
}

This will solve your issue.

 

I tried the code above and it does center the text below the video; however, sometimes the last letter on the right margin is cut off. If I leave the default code, occasionally part of the last letter is cut off, but appears much better.

Some of the last letters are cut off in the Feature descriptions that are not centered as well. (I justified them for non-responsive.)

The default only occasionally cuts off part of the last letter in the blog descriptions and the video description. The Feature Item descriptions are perfect with the default.

I am testing on an iPhone.

 

Hello,

Can you please explain your problem with the help of screenshot, where this issue is occurring and also share the link of your website, so that we can give you the exact solution.

 

The problem only exists when the text is justified for regular display and then centered for mobile. I decided to not make the text justified. In this case, the centering code above works well on mobile devices. I think this is the best solution. Thank you for your help.