- This topic has 12 replies, 3 voices, and was last updated 4 years, 3 months ago by David.
-
AuthorPosts
-
December 4, 2019 at 3:41 pm #1093791Daniel
Hello, could you help me please with section problem? I set the order of sections 1 to 6, but after loading on the mobile phone is the first place section 3. How to have the same order as on the desktop, please?
December 4, 2019 at 4:17 pm #1093810Danielπ I have one more problem. I addded screenshot.
Thx!
December 4, 2019 at 6:46 pm #1093902TomLead DeveloperLead DeveloperHi there,
Try this CSS:
@media (max-width: 768px) { .site-main { display: block; } }
Did you figure out the second issue? It looks good to me.
Let me know π
December 5, 2019 at 5:20 am #1094427DanielPlease, open webpage on mobile phone. I see this problem on Iphone 6. Thx
Where change it this code, please?
@media (max-width: 768px) { .site-main { display: block; } }
December 5, 2019 at 5:37 am #1094445DavidStaffCustomer SupportHi there,
add the code to Customizer > Additional CSS.
Whilst in there also look for this CSS:
.inside-page-hero { margin-left: 40px; margin-right: 50%; }
and change it to:
.inside-page-hero { padding-left: 40px; margin-right: 50%; }
December 5, 2019 at 5:57 am #1094470DanielHi, section order is okey now. Tjx!
Second solution did not work. I did not find a class “.inside-page-hero”, when I added to Customizer > Additional CSS, I see no change. I added screenshot from mobile phone.
Thank you so much
December 5, 2019 at 12:18 pm #1095005DavidStaffCustomer SupportCan you remove this CSS:
/* ------ Page Header ------- */ .page-hero { height: 100vh; background-size: 70vh; background-position: 90%; } .inside-page-hero { margin-left: 40px; margin-right: 50%; } @media (max-width: 419px ){ .page-hero { min-height: 568px; background-position: 42vw !important; } .inside-page-hero { margin-left: 20px !important; margin-right: 20% !important; } } @media (min-width: 420px) and (max-width: 768px) { .page-hero { background-position: 60vw !important; background-size: 60vh !important; } .inside-page-hero { margin-right: 40% !important; } }
and the last line:
.inside-page-hero { padding-left: 10px; }
Once thats done – let me know and ill provide some new CSS.
December 5, 2019 at 2:24 pm #1095118DanielHi, mobile version looks good, but desktop version is broken now.
December 5, 2019 at 2:26 pm #1095119DanielRight desktop.
Thx for a help! π
December 5, 2019 at 2:49 pm #1095128DavidStaffCustomer SupportNow add this CSS:
@media (min-width: 769px) { .page-hero { background-size: contain !important; background-position: right center !important; } }
In the Header Element you can add some padding so the text doesn’t touch the edges.
December 5, 2019 at 4:14 pm #1095194DanielThanks, look good. π Last problem is with Heading 1, Heading 2. I need padding-left: 40px;. The old class generates problem.
.inside-page-hero { padding-left: 10px; }
December 6, 2019 at 2:43 am #1095562DanielDo you have a solution, please?
December 6, 2019 at 4:03 am #1095626DavidStaffCustomer SupportInstead of using CSS – edit the Header Element there is an option to add padding.
-
AuthorPosts
- You must be logged in to reply to this topic.