Tagged: responsive, tablet
-
AuthorPosts
-
May 16, 2018 at 5:36 pm #957615
Hi guys,
When I check the website I’m developing on ipad mini in portrait mode, the header changes from white to green. The rest of the elements look smushed.
<EDIT> The color of the header has something to do with the color of the socket. When I change the color of the socket, the header color on mobile changes too?
How can I fix this?
Thanks in advance :)
Sincerely,
Morticka- This topic was modified 6 years, 7 months ago by Morticka.
May 18, 2018 at 9:59 am #958516Hello?
May 18, 2018 at 10:23 am #958524Hi Barb!
Hope you are doing well :)
I added following code to bottom of Style.css file of your child theme
.responsive.html_mobile_menu_tablet #top #wrap_all #header.av_header_transparency { background-color: white; } @media only screen and (max-width: 990px) { #inschrijven .flex_column_table_cell { display: block; width: 100%; } #inschrijven .flex_column_table { display: block; }}
Please review your website :)
Best regards,
YigitMay 18, 2018 at 12:13 pm #958574Hey Yigit, long time, hope you’re doing good too!! :D
Thx so much, this solved the header/socket problem, do you know what caused it?
And how can I “un-smush” the rest of the elements including in landscape as well? Do I use the separate screen options of each element?
Sincerely,
BarbMay 18, 2018 at 12:45 pm #958578Hey Barb!
I’m doing good too, thanks! :)
By default, transparent header is disabled on mobile so it displays the header in body background color, in your case green :) I simply set it to white.
You can add following code to Quick CSS to display each column full width on landscape mode
@media only screen and (max-width: 768px) { .responsive .flex_column { width: 100%; margin-left: 0; }}
Cheers!
YigitMay 18, 2018 at 12:56 pm #958585Hi Yigit,
Yessss, looking better, thx!! :D
The CTA above the fold in landscape mode is still smushed though, how can I fix this?
And can I make the stroke around the pictures in the tab section responsive? (I’ve added the stroke in the column.)
Sincerely,
BarbMay 18, 2018 at 1:13 pm #958589Hi Barb,
1- Can you please post a screenshot of the issue?
2- Please go to Enfold theme options > Layout Builder and check “Show element options for developers” and then edit your element and give it a custom CSS class (“my-custom-class” in example below) and then add following code to Quick CSS field in Enfold theme options > General Styling tab
.my-custom-class img { border: 1px solid #333333; }
Best regards,
YigitMay 18, 2018 at 2:41 pm #958615Hi Yigit,
It’s the same issue I had in portrait mode, only this time in landscape, see private data nr 1. :)
I’ve tried targeting the tabsection, column and finally the image in the tab section with a custom id, but that does not work? With just a column stroke it looks stretched out on mobile, see nr2 and 3 and finally 4 without a stroke
How can I fix it?
Sincerely,
BarbMay 18, 2018 at 6:11 pm #958754Hi,
1- I changed the code to following one
@media only screen and (max-width: 1240px) { #inschrijven .flex_column { width: 100%; }}
2- I added custom CSS class to your Tab Section element and added following custom CSS code to bottom of Style.css file of your child theme
.tab-img-border img { border: 2px solid #333333 !important; }
Please delete border from your columns.
Please review your website :)
Best regards,
YigitMay 19, 2018 at 12:51 pm #959039Yigit, as usual, you rock!!! Thank you, it looks so much better now :D
You can close this one.
Sincerely,
BarbMay 20, 2018 at 10:21 am #959381Hi Morticka,
Glad we could help :)
If you need further assistance please let us know.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.