-
Posts
-
Hi,
I am having some problems with the mobile layout on this page. The gray blocks with a middle border. I am using grid row 1/2 and 1/2, and I would like that middle border to be in the middle of the screen, and the content is of equal width on both sides (it will be clear when you look at the page). Now the content is being pushed to the left and the width is just generally different for each grid row, especially for tablet. On tablet the white rows for the headings also do not stretch across the full width of the screen.
Thank you.
Hey limyj0923,
I checked your website on mobile and it looks fine to me. Can you highlight using screenshots showing what you want to change please?
Best regards,
AndyHey limyj0923!
Can you please remove any custom CSS added to the site and then check again?
Please do also clear your cache so we can be sure.Thanks a lot
Best regards,
BasilisHi,
Here’s the link for the screenshots, you can see how the page looks like on mobile and tablet view. These are from the Customize preview, I checked with an iPad and Galaxy S5 as well and they look like this too.
You are right, when I removed the custom CSS the problem disappears. But I need those custom CSS…
Thank you.
Hi,
Could you remove the CSS argument by argument so that you know which one is causing it? When you know that we can help you out with styling what you initially wanted to style if you can elaborate a bit on that.
Thanks,
RikardHi,
After removing them, the argument that is causing the problem is the one that I used to display that page on mobile:
#servicesmobile { display: none; }
@media only screen and (max-width: 768px) {
#servicesmobile { display: block !important; }
}The page looks fine when I remove that. You can see in the dropbox link I provided, the screenshots with the correct appearance and the ones with the problem.
Thank you!
Hi,
You should should use a css ID selector once in a page. It should be unique. (https://css-tricks.com/the-difference-between-id-and-class/). Please use the “servicesmobile” as a custom css class attribute, not a Section ID. http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Best regards,
IsmaelHi,
I have enabled the custom css field and changed the servicesmobile from section id to custom css class attribute. But the problem is still there…
I simply changed:
#servicesmobile { display: none; }
@media only screen and (max-width: 768px) {
#servicesmobile { display: block !important; }
}to:
.servicesmobile { display: none; }
@media only screen and (max-width: 768px) {
.servicesmobile { display: block !important; }
}Is there something wrong…?
Hope you guys can assist with this as it is holding me back from publishing the site.
Thank you.
Hi,
Since you’re using the grid row element, the display property should be set to table. Replace the code with the following:
@media only screen and (max-width: 768px) { .servicesmobile { display: table !important; } }Best regards,
Ismael
- You must be logged in to reply to this topic.