Mobile view (too much space on top of the page)
-
Hi Guys,
On the mobile view of this site, there’s a huge white space between the top of the page and the beginning of the post (https://cswilde.com/acoaus/ )
I looked through the forums and googled it but can’t find a code : (
Do you know of any?
Many thanks! : )
The blog I need help with is: (visible only to logged in users)
-
Hi there, this code in your custom CSS is what is causing the gap at the top on the page you reference.
.page-id-3540 #wrapper { margin-top: 120px; position: static; }Try changing the 120px to 8% and see what you think. You can adjust the percentage as you desire, but 8 seems to keep the spacing on wide windows, but considerably lessens it on narrower windows/devices.
-
-
There’s also this huge gap on the mobile version between the Buy Book Button and the golden round icon, do you know how to decrease that? It’s only happening in the mobile version *sigh*
-
Hi, I’m not seeing a large gap above the book image when I view that page on my iPhone 5s.
I took a look at your page and found the following 4 empty divs below the by the book button.
<div class="landing-image-left"></div> <div class="landing-image-left"></div> <div class="landing-image-left"></div> <div class="landing-image-left"></div>Open that page in the editor, switch to the Text tab, scroll down near the bottom and remove those four empty divs.
Also near the top of that page in the Text tab in the editor, I see the following two empty h4 elements, which should also be deleted.
<h4 class="font_7" style="text-align:left;"></h4> <h4 class="font_7" style="text-align:left;"></h4> -
That’s the problem, I tried taking out those spaces but then the Desktop version becomes all crumpled, because of the book image which is indented left, and so it drags the golden button to the right as well and it de-centers the whole thing.
If you see it under the desktop view now, you’ll see it’s all uncentered after deleting those lines : (
-
Ok, let’s start with a few questions and then we will go from there.
- Where do you want the book image when viewed on desktop and also on mobile/smaller screens?
- Where do you want the gold round image when viewed on desktop and also on mobile/smaller screens?
- Where do you want the Buy the Book button when viewed on desktop and also on mobile/smaller screens?
Using empty elements in the page content to produce spacing can cause problems on responsive designed themes such as Responsive. Let me know on the above questions an
-
Thank you very much in advance : D
Where do you want the book image when viewed on desktop and also on mobile/smaller screens?
On the desktop, the book image is good as is (on the left of the page, followed by the blurb). On mobile, it would be great if it were centered. I kind of mirrored the desktop view of this wix page: http://bit.ly/LANDACOA
The mobile look of that page is also what I’m aiming for. The header was just too messy when converting to mobile with WP, so I decided to leave it out. ^_^””Where do you want the gold round image when viewed on desktop and also on mobile/smaller screens?
On the desktop, it should be on the left, followed by the testimonials, much like the book image and the blurb: one on the left, the other one on the right. But if not possible, it can be centered and then followed by the centered testimonials.
On the mobile view, the round image should come straight after the”Buy this book” button.Where do you want the Buy the Book button when viewed on desktop and also on mobile/smaller screens?
On Desktop: Centered on the page, right below the image and blurb.
On Mobile: Straight after the blurb.
-
Hi, and thanks a lot for the clarification. Trying to edit and adjust things with the way things are done right now is very challenging. Would you be willing to copy out (from the text tab) all the text/code in the acoaus page and paste it into a new page and name it something like temp and save it as a draft so that I can make adjustments to that draft page and get the CSS and HTML set so that it looks like you want it? Once you are happy with the draft page, you can copy out all the code and text from the draft page and put it into your live page.
-
-
Excellent. I’ll start work on things in a bit for you and let you know when I have it done.
-
Sorry this took me a bit longer than I wanted. Check out your “test” page now and see what you think on your desktop, phone and tablet (if you have one).
I’ve edited the test page and used some different CSS classes since trying to work on the ones you had was a bit confusing for me. I’ve also added some additional classes to some elements to allow me more control over things.
I’ve also done something I typically don’t do, which is add the relevant CSS to the bottom of your existing CSS and I’ve put a comment line above it identifying what I added. It also includes the max-width: 768px CSS media query you had since I made some changes to that as well.
Let me know what you think.
-
No need to apologize, you guys are doing amazing work!
It looks great!
Quick question: How can I set the heading to museo sans as well? And is it possible to increase the font size only in the blurb?
I added some CSS to the page to take out the header, footer, make the background white etc : D So I think we’ll be done very soon : DYou rock!
-
You are only able to set two custom fonts at Customize > Fonts. Since you do not have that font set, we cannot add Museo.
On the font size for the blurb, I’m assuming you are wanting to change the paragraph that starts with Santana Jones has always wondered… correct?
The easiest way to do this would be to do an inline style on that paragraph like this.
<p style="font-size: 120%;"><em>Santana Jones has always... </p>
You can edit the size as desired. -
-
-
Hello,
I’m seeking help with a similar issue so I thought it might make sense to continue this thread (fingers crossed :).
My site title is getting broken in the mobile version on an iPhone 5s. What CSS could I add to make the title a little smaller so it stays on one line?
I’m using the independent publisher theme and am hoping to make a few tweaks so I can upgrade to a business plan, transfer my domain name, and share this site widely in a couple of days. The current url is:
http://lindsayhpassmore.wordpress.com.
Many thanks in advance for any assistance you can offer! If necessary I could start a new thread, I just thought it might be useful to others to add this here as well!
-
Hi @lindsaydell, since you are using a different theme, and since CSS is generally theme specific, can I ask you to create a new thread in the CSS Forum? Many thanks in advance.
-
- The topic ‘Mobile view (too much space on top of the page)’ is closed to new replies.
WordPress.com Forums 