Full-width header, need CSS code for changing mobile display
-
Hi, I have a full-width header that does not display properly on the iPad and iPhone when the mobile version of my site is enabled. Now, I have already disabled the said mobile version of my site, however not much has changed in the display.
What I would like right now is for the desktop version to appear on both tablets and mobiles. Do you have a CSS code for that? My header and all the illustrations I am about to post on my page are all full-width, so it would definitely be better to have the desktop version displayed on both tablets and mobiles.
I got this response from a WordPress.com member before. — “If you’d like the mobile theme to remain disabled, and artwork displayed just as it is on desktop, you can use percentages in your CSS width directives rather than width set by pixels. This will allow the layout to be responsive, and fill the screen the same way regardless of the display’s width. Theoretically, this should allow it to display uniformly across desktop, tablet, and mobile.”
However, I don’t really know what code to write. Can you please assist me with this? What percentages should be written in order to make sure that my entire header will appear properly across all devices? Would really appreciate your input, as I am not very familiar with coding.
Thank you very much.
The blog I need help with is slingshotbagwell.com.
The blog I need help with is: (visible only to logged in users)
-
Hi there, Arcade is a responsive theme design which means it adjusts to all screen sizes from a large desktop monitor all the way down to a phone, so you do not need to enable the mobile theme at Appearance > Mobile.
I’ve tried a couple of things to get the header image to resize properly on smaller devices, but it isn’t working smoothly, so I’m going to discuss this with the Theme Team and will report back as soon as I have an answer.
-
Hi! That is correct. One of your colleagues sent me a CSS code to try yesterday, however it did not work smoothly. Yes, please let me know your findings with the Theme team. Would really appreciate it. Thank you!
-
@slingshotbagwell, I’ve tried a number of CSS fixes and nothing works smoothly, so I’m filing a bug report on this and will report back as soon as I hear something. Hopefully it will be soon.
-
Hi @thesacredpath, I would like to follow up on this. I hope the Theme team figures it out soon. Thank you!
-
Hello, has there been any response from the Theme Team? It’s been awhile, I hope they can fix these bugs as soon as possible.
-
Sorry for the delay in responding, but we were all at our company meetup.
The arcade theme is better with photographic style images than with headers with logo style graphic images in them, but I’ve done some playing around and I think the following CSS will take care of the issue. Paste this in at the bottom of your existing CSS and test it out.
.title-card { background: #000; } .title-card img { height: auto !important; width: 100% !important; top: 0 !important; } @media screen and (max-width: 1024px) { .title-card { height: 250px !important; } } @media screen and (max-width: 768px) { .title-card img { top: 4px !important; } .title-card { height: 200px !important; } } @media screen and (max-width: 600px) { .title-card img { top: 12px !important; } .title-card { height: 150px !important; } } @media screen and (max-width: 480px) { .title-card img { top: 20px !important; left: 0 !important; } } @media screen and (max-width: 335px) { .title-card img { top: 50px !important; left: 0 !important; } }I’ve covered the most popular device/screen widths for tablets and mobiles with the media queries. Let me know what you think.
-
Hi @thesacredpath, thank you very much for working on it. I truly appreciate it! The header finally displays correctly on the iPad and iPhone – both in portrait and landscape versions. I am very happy with how it turned out!
-
- The topic ‘Full-width header, need CSS code for changing mobile display’ is closed to new replies.
WordPress.com Forums 