Tagged: Responsive Design
-
AuthorPosts
-
November 14, 2016 at 3:58 pm #712027
Hello,
I’m working on the responsive design on this site: http://www.myredbag.dk/forside and need some help with a few options.
1. I want the content to be full with from media screen 1024px
2. I want the main menu to collapse from media screen 768pxPlease help me.
Best regards,
Helle ØstergaardNovember 14, 2016 at 4:06 pm #712031Hi GraphicEyeDK!
1- Please add following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (max-width: 1024px) { .flex_column { width: 100% !important; margin-left: 0 !important; }}
2- Please go to Enfold theme options > Header > Mobile Menu and choose to display mobile menu on smartphones. Also, please see – http://kriesi.at/documentation/enfold/switching-to-mobile-menu-on-higher-resolutions/
Best regards,
YigitNovember 16, 2016 at 10:00 pm #713211Hi,
1. That doesn’t work.
2. Yes, now the menu is collapsed, but the cart is hidden behind the menu.Best regards,
Helle ØstergaardNovember 20, 2016 at 4:26 pm #714528Hey!
1.) Is the the content needed to be in fullwidth when screen width is 1024px, the section with this title ‘Velkommen til My Red Bag’ and has some texts below it?
2.) The dropdown shows up just fine, can you provide a screenshot how it looks on your end?Cheers!
NikkoNovember 20, 2016 at 5:52 pm #714556Hi,
1. Yes
2. The dropdown works fin, but the cart is hidden behind the menu – screenshot: http://www.myredbag.dk/wp-content/uploads/2016/11/Skærmbillede-2016-11-20-kl.-16.47.48.pngBest regards,
Helle ØstergaardNovember 21, 2016 at 7:49 am #714695Hi!
1.) Seems to be already in fullwidth, but try to add this code to Quick CSS:
@media only screen and (max-width:1024px) and (min-width:768px) { .page-id-504 #after_full_slider_1 .container { padding: 0; } .page-id-504 #after_full_slider_1 .entry-content-wrapper > * { padding-left: 50px; padding-right: 50px; } .page-id-504 #after_full_slider_1 .entry-content-wrapper > .hr-custom { padding-left: 0; padding-right: 0; } .page-id-504 #after_full_slider_1 .entry-content-wrapper > .av_one_full { padding-left: 20px; padding-right: 20px; } }
2.) Try to add this code in Quick CSS:
@media only screen and (max-width:989px) and (min-width:768px) { #top #header .main_menu { right: 46px; } }
Let us know if it works :)
Regards,
NikkoNovember 21, 2016 at 10:03 am #714726Hi,
Thanks for your reply.
1. I’m sorry if I can’t explain myself properly, but that was not what I meant. What I want to achieve is the grey background to disappear and the rest to be fullwidth. Just as it looks at media screen 768 px.
2. That works now. Only I want the grey line at the left of the cart to disappear.Best regards,
Helle ØstergaardNovember 21, 2016 at 10:17 am #714733Hi!
1.) Ignore the code I have above for 1.) and add this code in Quick CSS:
.responsive .boxed#top { max-width: 100%; }
2.) Try adding this code in Quick CSS:
#header #menu-item-shop { border: 0 !important; }
Let us know if this helps :)
Best regards,
NikkoNovember 21, 2016 at 10:53 am #714740Hi,
1. I had to add !important to make it work. And to get the header fullwidth too I added:
.responsive.html_boxed.html_header_sticky #header {
max-width: 100% !important;
}2. That works just fin now :-)
Thanks for your help.
Best regards,
HelleNovember 21, 2016 at 10:55 am #714742Hi!
Glad we could help. :)
Cheers!
Nikko -
AuthorPosts
- The topic ‘Responsive design’ is closed to new replies.