-
Posts
-
Hello,
I tried to make a custom CSS to force breakpoint of 3x one third columns on iPad and resolutions slightty above
It doesn’t work though. Can someone tell me what is wrong? Element width of 70% should force trigger a breakpoint right?@media only screen and (max-width: 1100px) and (min-width: 989px) {
#main .flex_column.av_one_third {
margin-left: 6%;
width: 70%;
}}Thanks!
Hey Flow9999,
Could you post a link to where we can see the elements in question please?
Best regards,
RikardHi Rikard,
changing width of column to 80% does not trigger a breakpoint with code from above.
Link and screenshot is in private data.
Thanks for your help!Hi Flow9999,
I do not understand what you mean by changing the width to trigger the breakpoint. It is the other way around.
How do you need it to look at 1024px? One column till 1100px?
Can you disable caching and minification for now?
We cannot test the css properly like this.Best regards,
VictoriaHi Flow9999,
Well, I am trying to test the css on your end and I do not have a file in the browser to test it in since you have the css and html together.
Do you want to have the 1/3 to be 100% on the iPad till 1024px?
Could you please attach a mockup of what you’re trying to achieve?
Best regards,
VictoriaThank you very much for your efforts Victoria!
The current setting is 3x 1/3 columns for all screen widths from 989px and above.
Below 989px there is a “mobile breakpoint” which means all 1/3 columns will be displayed as full width elements.
My goal is to let the 1/3 columns be shown as full width for screen width 1024px and below.
iPads do have 1024 screen width, so having 3x one third columns per row results in a messy result.
You can see it in my initial screenshot in this thread.
If I can change those columns to be full width on 1024px screen width, it will look much better on iPads.Thank you very much!
Hi!
Thank you.Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width: 1024px) { .responsive #top #wrap_all .flex_column.av-break-at-tablet, .responsive #top #wrap_all .av-break-at-tablet .flex_cell { margin: 0; margin-bottom: 20px; width: 100%; display: block; } .avia_mobile #top .flex_column_table { display: block; } }If it works as you need, you can enable the caching plugin.
If you need further assistance please let us know.
Regards,
VictoriaThanks Victoria,
I got it to work with some modifications.
However it seems that setting the breakpoint to be at 1024px, does not deliver the best outcome.
I think a better strategy would be to be able to set a smaller font size for column text and heading only for iPad screen width
(@media only screen and (max-width: 1024px) and (min-width: 989px) )
Enfold responsive options will show selectable font sizes for mobile, but only up to 989px.
Is there any way to make font size adjustments for 1024px screen width?Kind regards
Hi Flow9999,
Well, of course, it is possible. Which elements do you need to be adjusted?
Best regards,
VictoriaThanks Victoria! I’d like to make font size smaller (for 1024px screen width) on heading and text of all my 6x 1/3 columns at bottom of main page.
Hi,
Unfortunately, it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)
Best regards,
BasilisI can try to do it myself with @media queries and using custom css classes for elements along with font-size attribute and !important tag.
Maybe it’s better to wait for an enfold update with responsive 1024px (iPad) support.Hi Flow9999,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width:1100px) and (min-width: 990px){ #top #wrap_all .flex_column_table_cell .custom-color-heading .av-special-heading-tag { font-size: 20px; } }If you need further assistance please let us know.
Best regards,
Victoria
- You must be logged in to reply to this topic.