-
Posts
-
NSFW
Mobile view top image doesn’t go all the way to top and logo/menu are squeezed in on the blissfullcreations.com site.
This website used to show correctly on mobile view, but now it doesn’t. I included 2 screenshots of 2 of my sites. 1 shows correctly and the image goes all the way to the top of the phone with no space at the top, And, the logo and cart are spread out and close to the edges of image area.So, can you get me CSS code for the “incorrect” one that has space at the top and the logo and cart and squeezed in too tight?
Thanks
Hey bemodesign,
I can’t see any screenshots in your post, please try linking to them again.
Best regards,
RikardNSFW
Attached. I marked in green, the issues. it needs to be completely to the top of mobile and logo/cart spread out to the edges more. It was before, so not sure what happended with CSS.
thanks!Let me know. thanks
Hi,
Thanks for that. It looks like that is picking the body background colour or something similar. You could try this CSS out to see what happens:
html, body { background-color: yellow !important; }Best regards,
RikardWait, how will this help the formatting on mobile view issues? The top part should go all the way up, like the good screenshot website. And Blissfull also need to have the logo and cart images spread out more, instead of compacted. thanks
against that squeeze :
@media only screen and (max-width: 767px) { .responsive #top #wrap_all #header .container { width: 97%; max-width: 97%; } #menu-item-shop .cart_dropdown_link { padding: 0 25px; } /* === against that jump on header positioning absolute / fixed === */ .responsive #top #wrap_all #header.av_header_transparency { position: fixed !important; } }on mobile less than 767px – is it intentional that the logo is that big?
because the header height and all line-height are set to 80px but your logo is set to 120px.if you like to have an overlapping logo like:
then you need some extra css.
Hi,
I can not view your screenshots without a login, was Guenni007’s css helpful?
When I check your logo is not overlapping:
Best regards,
MikeNSFW So, that did help spread everything out, thanks. But a couple things:
1. Can we make the icons larger on mobile? There is a lot of room between logo and icons and they could be larger.
2. See screenshot. How can we get the photo image to go all the way up and fill that black space, like it used to.thanks!
Hi,
This green circle is your phone not the site:
Best regards,
MikeHa, yes, I know that. Bu the image used to go all the way to the top. like this: example site that the photo goes all the way to the top: https://drive.google.com/file/d/1eRMLMPlQeM0T6hBy3Danuzys48c4lWbe/view
And now it doesn’t, it shows a black areas, instead of the image going to the top of phone.
- This reply was modified 3 weeks, 1 day ago by .
Hi,
I can not see your screenshot as it requires a login, when I check the image goes to the top:
I check on Android, the black area (in the green circle) in your screenshot is from your phone not the site.Best regards,
MikeI though it used to go up into the phone part at the top also. I guess it can’t.
So, can we at least make the icons to the right of the logo a little larger?Here is the screenshot of the one that goes to the very top of phone area. (no black area): https://drive.google.com/file/d/1eRMLMPlQeM0T6hBy3Danuzys48c4lWbe/view?usp=sharing
Thanks!
- This reply was modified 3 weeks, 1 day ago by .
Hi,
I can not see your screenshot as it requires a login, To add a screenshot please try using an Screenshot service and pasting the image URL in your post.Best regards,
MikeIt says anyone with a link has access, but maybe there is something blocking you. Anyways, here it is: https://img.savvyify.com/image/correct.92epd
I’ve had this on a few of my site, where the image goes all the way to the top of phones. I know you can change the color of that top area, but I’ve also had code to show the image up there. thanks
- This reply was modified 3 weeks, 1 day ago by .
Hi,
Sorry for the late reply. Please try this CSS as well:
@media only screen and (max-width: 767px) { #menu-item-wc-account-icon a:before { font-size: 26px; } }Best regards,
RikardGreat, that worked for this icons. Now can the image photo go all the way to top of the phone, with no black area where the time and battery are. I know you can change this color but youve’ also given me code to ahve photo run all the way up.
Nothing is helping the photo image go all the way to the top of mobile device. It used to be able to.
Hi,
In your screenshot:
the image is not all the way to the top, the top bar background color is white because of the Safari Website Tinting option:
from the site background color.
This color is not customizable beyond setting a solid color that matches the theme color of your website
and you cannot overlay an image or extend the background of your website into the status bar area
Best regards,
Mike
- You must be logged in to reply to this topic.