Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • November 17, 2019 at 4:47 pm #1157658
    Flow9999

    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!

    November 18, 2019 at 3:56 am #1157733
    Rikard

    Hey Flow9999,

    Could you post a link to where we can see the elements in question please?

    Best regards,
    Rikard

    November 21, 2019 at 1:12 am #1158659
    Flow9999

    Hi 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!

    November 22, 2019 at 5:28 pm #1159233
    Victoria

    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,
    Victoria

    November 26, 2019 at 2:40 am #1160152
    Flow9999
    This reply has been marked as private.
    November 27, 2019 at 3:25 pm #1160657
    Victoria

    Hi 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,
    Victoria

    November 27, 2019 at 4:31 pm #1160682
    Flow9999

    Thank 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!

    November 27, 2019 at 7:11 pm #1160781
    Victoria

    Hi Flow9999,

    Thank you for clarifying.

    Best regards,
    Victoria

    • This reply was modified 5 years ago by Victoria.
    November 28, 2019 at 1:52 am #1160847
    Flow9999
    This reply has been marked as private.
    November 28, 2019 at 12:08 pm #1160913
    Victoria

    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,
    Victoria

    November 28, 2019 at 2:14 pm #1160973
    Flow9999

    Thanks 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

    November 29, 2019 at 4:51 pm #1161258
    Victoria

    Hi Flow9999,

    Well, of course, it is possible. Which elements do you need to be adjusted?

    Best regards,
    Victoria

    November 29, 2019 at 11:49 pm #1161408
    Flow9999

    Thanks 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.

    December 4, 2019 at 11:49 pm #1162756
    Basilis

    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,
    Basilis

    December 8, 2019 at 4:21 pm #1163824
    Flow9999

    I 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.

    December 8, 2019 at 9:50 pm #1163906
    Victoria

    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

    December 11, 2019 at 2:45 pm #1164825
    Flow9999

    Thanks alot Victoria!

    December 11, 2019 at 6:29 pm #1164921
    Victoria

    Hi Flow9999,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • You must be logged in to reply to this topic.