Hi, the “grow” part, I have some css to make it bold, and change the color, but why is the font size smaller?
Hi @logoglo,
Unfortunately, the given URL is not working so I am not sure which section are you talking about. But judging with the title of your question, it seems that you have problems with the responsive view of the Revolution Slider.
I suggest that you check the article below which contains a well-crafted video which shows the correct way of adding a responsive slider:
https://www.themepunch.com/faq/slider-revolution-responsive-tutorial-5-0/
The other alternative that you have is to use the hide during breakpoint feature which you can use if needed.
Finally, when it comes to the Responsive etext I suggest you check our lead developer insight here which can be of a great help.
If you still have problems please get back to us with the correct URL and more detailed information about the case. Screenshots will help us much more to understand the case.
Thank you.
Sorry, its http://entrecoach.kinsta.com
And no, its nothing to do with responsiveness…
The text is ok, but its as if there is css changing the size of the word Grow.
I have this “Can Grow!” so it should just stay the same size as the rest, but change color and weight.
Hi again,
It was the text responsiveness that was making your text smaller in smaller screen resolutions. I went ahead and gave your “Grow” word a class custom-text:
<span class="custom-text" style="color: #00bbe3; font-weight: 700;" font-size: 35px;>Grow!</span>
Then added the following code in the Theme Options > CSS:
.custom-text {
font-size: 35px !important;
}
Now it’s the same size in every screen resolution. Feel free to adjust the font-size as per your need.
If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.
I recommend you to watch following video that will help you to get started with CSS.
Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.
https://developers.google.com/web/tools/chrome-devtools/css/
Hope this helps!
Thanks, Im pretty ok when it comes to CSS, I was just confused at why it would make it smaller? when all I did was add bold and color.
Shouldnt it stay the same size as the rest of the text? shouldnt it shrink when the other text does so its responsive?
Hi,
Kindly remove the font size and class that was suggested as it will make your text non responsive.
I would suggest that you add your text to just one text layer instead of multiple layers.
That way it will resize as one.
eg. Add this in a text layer
We Help Accomplished<br>
Entrepreneurs Simplify<br>
Everything So They<br>
Can <span style="color: #00bbe3; font-weight: 700;">Grow!</span>
For more information regarding responsiveness, kindly refer to the links below.
https://www.themepunch.com/revslider-doc/slide-layers/#layercanvas
Hope that helps.
Hmmm, I want them as they are now, as they animate in at different times…please try and explain why its not the same size font as the others? I havnt added css to change the size, only to add bold and change color, its shouldnt effect the size.
Hi @logoglo
I’ve checked your site and I can see there is an element CSS rule giving this word font-size: 41px; on Desktop and font-size: 10px on mobile devices, this is most probably the font-size responsiveness option in revolution slider as mentioned before by my colleagues:
To allow us investigating this issue, then please provide us with WordPress Dashboard login details in a “Secure Note”.
Thanks.
Sure, see secure note.
Then surely it should be the same as the other text right? I havnt added any font -size css to the “Grow” part…so it shouldnt change…
Hi @logoglo,
I believe that it is because the revolution slider is auto responsive.
Hope it helps.
Let us know how it goes.
Thanks.
That seams to have fixed it, though, pretty strange why it would effect just the word Grow…
Also, can you check this out…on a smaller laptop screen, it aligns to the far left, instead of indent left like the other other views…:
Hi,
Please note that you can toggle on the Screen/Device and change the position and font size of your text layer.
See Video - https://www.screencast.com/t/tcNoEjfIAkIr
For more info:
2 Screen/Device
To use this option, you first have to enable a Custom Grid Size for additional screens/devices.
Toggling between the different options here will allow you to style and position your Layer content based on the selected screen/device.
For example, if you had a text-based layer, you could assign it a font-size of 64px, with a top-right position for desktop view. Then if you switch to the smartphone view, you could change the layer’s font-size to 32px, and give it a bottom-left position.
https://www.themepunch.com/revslider-doc/slide-layers/#layercanvas
Hope that helps.
I understand all of this, but its deffo acting strange, look for the “laptop” grid and how I have the text:
But on the site its aligning to the left of the screen, instead of the grid, even if I have the top text positioned further to the right in my slider, it does not show this on the site.
Hello There,
The layers is displaying correctly. Please understand that the basis of the layers is the two vertical neon lines which can be seen in your first screenshot. Those two neons lines serves as the edge of the desktop screen. As soon as you resize your browser large or view in a large screen, there will be a space added on the left and right of the slide. Still the neon lines is the boundary for the layers.
Hope this helps.
Sorry, but that still doesnt explain.
I have my text 90px right of the line now (for that screen size)
Yet it is still aligning to the far left.
Please explain further, the rest of the size works perfectly, just this one…and I have it within the boundaries, and to the right, yet its still going far left.
Is there anyway I can “disable” just this screen size? so instead of 4, its 3…desktop, tablet and mobile? instead of desktop, laptop, tablet and mobile.
Like I said, it works fine on all 3, just this one its not.
Hi @logoglo
Please check this,
Switch it to desktop icon and match the 90px alignment.
And if you don’t need those device views, please go to your slider settings and disable those devices.
These device views are generic, it doesn’t represent all kinds of device. There are desktops that are in between large desktop and laptop, or in between laptop and tablet sizes. Disabling them should be the first steps, then toggling-on one at a time if you see issues on a specific device and you wish to apply changes while not affecting other views.
Thanks!
I disabled that, and it made it even worse, so it was aligning far left on most views between desktop and tablet 
I dont think this is going to be resolved, I cant understand why its doing what its doing. The other sizes work as they should, left aligned, but not to the far edge, that size is setup exactly like the others, yet its doing what its doing.
Ahh well. I will live with this how it is, not happy though.
Thanks for trying.
No problem.
If you need anything else we can help you with, don’t hesitate to open another thread.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.