{"id":603,"date":"2021-12-01T15:05:03","date_gmt":"2021-12-01T14:05:03","guid":{"rendered":"https:\/\/skabelon.sinnsigngrafisk.dk\/?page_id=603"},"modified":"2022-02-15T22:21:27","modified_gmt":"2022-02-15T21:21:27","slug":"koder","status":"publish","type":"page","link":"https:\/\/skabelon.sinnsigngrafisk.dk\/index.php\/koder\/","title":{"rendered":"koder"},"content":{"rendered":"

[et_pb_section fb_built=”1″ _builder_version=”4.14.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.14.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.14.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.14.2″ _module_preset=”default” global_colors_info=”{}”]<\/p>\n

Mobil menu:<\/span><\/h1>\n

Skifte farve p\u00e5 menu linie eller fjern linien<\/span><\/h3>\n

Today I show you guys how to change the blue line in the mobile menu of divi. Here are the codes: CHANGE COLOUR: <\/span><\/p>\n

\/* Change the mobile menu top border *\/ .et_mobile_menu { border-top: 2px solid <\/span>#d9b310<\/a>!important; }<\/span><\/p>\n

fjern linien:<\/span><\/h4>\n

\/* Remove the mobile menu top border *\/ .et_mobile_menu { border-top: none !important; }<\/span><\/p>\n

<\/span><\/p>\n

\u00c6ndre farve p\u00e5 Hamburgermenu<\/span><\/h3>\n

span.mobile_menu_bar:before{color:#682e36;}<\/span><\/p>\n

<\/span><\/p>\n

[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.14.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/skabelon.sinnsigngrafisk.dk\/wp-content\/uploads\/2021\/12\/Skaermbillede-2021-12-03-kl.-22.32.58.png” title_text=”Sk\u00e6rmbillede 2021-12-03 kl. 22.32.58″ _builder_version=”4.14.2″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ theme_builder_area=”post_content” _builder_version=”4.14.7″ _module_preset=”default”][et_pb_row _builder_version=”4.14.7″ _module_preset=”default” column_structure=”1_2,1_2″ theme_builder_area=”post_content”][et_pb_column _builder_version=”4.14.7″ _module_preset=”default” type=”1_2″ theme_builder_area=”post_content”][et_pb_text _builder_version=”4.14.7″ _module_preset=”default” theme_builder_area=”post_content” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n

Bevar kolonner p\u00e5 iPad og\u00a0 Mobil i Divi<\/h1>\n

 <\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.14.7″ _module_preset=”default” theme_builder_area=”post_content” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n

Steps to stop your columns from breaking in Divi on mobile:<\/strong><\/p>\n

\n
\n
    \n
  1. Add a class to the row > advanced CSS section (like \u201cthree-columns)<\/li>\n
  2. Add the class to your stylesheet or custom CSS area<\/li>\n
  3. Add .et_pb_column after the class<\/li>\n
  4. Adjust the with accordingly (like width: 33.33%!important for 3 columns on mobile)<\/li>\n
  5. You\u2019ll also want to place this in a media query to make sure you don\u2019t adjust the desktop version (see code below)<\/li>\n<\/ol>\n

    And that\u2019s it! Easy peasy. And again, you can add this to all kinds of elements in Divi. Images, text boxes, icons, blurbs and more!<\/p>\n<\/div>\n<\/div>\n

    \n
    \n

    Here\u2019s the CSS I wrote in the video:<\/strong><\/p>\n

    \n
    \n\n\n\n
    \n
    \n
    @media only <\/code>screen<\/code> and (<\/code>max-width<\/code>: <\/code>980px<\/code>) {<\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0<\/code>.three-columns .et_pb_column {<\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0<\/code>width<\/code>: <\/code>33%<\/code>!important<\/code>;<\/code><\/div>\n
    }<\/code><\/div>\n
    }<\/code><\/div>\n
    \u00a0<\/div>\n
    @media only <\/code>screen<\/code> and (<\/code>max-width<\/code>: <\/code>479px<\/code>) {<\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0<\/code>.three-columns .et_pb_column {<\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0<\/code>width<\/code>: <\/code>50%<\/code>!important<\/code>;<\/code><\/div>\n
    }<\/code><\/div>\n
    }<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

    Here are some example CSS class and code options you can use for any row moving forward!\\<\/p>\n

    \n
    \n\n\n\n
    \n
    \n
    @media only <\/code>screen<\/code> and (<\/code>max-width<\/code>: <\/code>980px<\/code>) {<\/code><\/div>\n
    \u00a0<\/div>\n
    .two-columns .et_pb_column {<\/code><\/div>\n
    width<\/code>: <\/code>50%<\/code>!important<\/code>;<\/code><\/div>\n
    }<\/code><\/div>\n
    \u00a0<\/div>\n
    .three-columns .et_pb_column {<\/code><\/div>\n
    width<\/code>: <\/code>33.33%<\/code>!important<\/code>;<\/code><\/div>\n
    }<\/code><\/div>\n
    \u00a0<\/div>\n
    .four-columns .et_pb_column {<\/code><\/div>\n
    width<\/code>: <\/code>25%<\/code>!important<\/code>;<\/code><\/div>\n
    }<\/code><\/div>\n
    \u00a0<\/div>\n
    }<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

    [\/et_pb_text][\/et_pb_column][et_pb_column _builder_version=”4.14.7″ _module_preset=”default” type=”1_2″ theme_builder_area=”post_content”][et_pb_code _builder_version=”4.14.7″ _module_preset=”default” theme_builder_area=”post_content” hover_enabled=”0″ sticky_enabled=”0″]