-
AuthorPosts
-
December 6, 2015 at 10:48 am #694352
Hi,
I am newbie with WordPress, please bear with me and provide layman guidance as much.
WP: 4.3.1
X Themes: 4.2.2
Cornerstone: 1.0.10
http://goforcrumbs.comI have three questions.
Q1 I wish to set the header image to full width size.
The following have been set.
1) Page Template: Blank – No Container
2) Row settings: Column Container = OFF
css settings as per attached.Unfortunately, the image does not scale to full size.
Q2. How can I control the height of the image? Can I make the image occupying full screen (Eg: http://www.uber.com) or sometimes I want to control leaving 20% of free space from the bottom?
Q3. I have 4 smaller images below the header images. I would like to scale them so that they have minimal white spaces between each images. And each images are scaled and fully occupy the full width.
I am looking at http://www.apple.comMany thanks.
December 6, 2015 at 11:22 am #694388Hi There,
Thanks for writing in!
Try adding following CSS under Customize > Custom > CSS:
@media (min-width: 768px){ .home #x-section-1 .x-1-1 .x-img { width: 100%; height: calc( 100vh - 90px ); margin-bottom: 0; } .home .x-container { width: 100%; max-width: 100%; } .home #x-section-1 .x-column.x-1-4 { width: calc( 25% - 2px ); margin-right: 2px; } .home #x-section-1 .x-column.last, .home #x-section-1 .x-column:last-of-type { margin-right: 0; } }
Hope it helps.
December 6, 2015 at 12:14 pm #694435This reply has been marked as private.December 6, 2015 at 3:49 pm #694577Hi There,
Little not sure which part you want to adjust. Would you mind sharing us a screenshot of which header’s you want to adjust.
You can attach the image using the file attachment below.
Thanks.
December 6, 2015 at 6:22 pm #694691Hi,
I am attaching the screenshot.
December 6, 2015 at 7:13 pm #694755Uploading again. The previous file seems not uploaded.
December 6, 2015 at 7:16 pm #694760Uploading.
December 6, 2015 at 8:14 pm #694824Hello There,
Please go to your customizer and adjust the navbar top height. You may find this in Appearance > Customize > Header > Navbar. You may also need to adjust the logo top and bottom alignment. And also the top link align.
Appearance > Customize > Header > Logo – Alignment
Appearance > Customize > Header > Link – TextIf you want to control the space at the bottom of you section, you can insert a gap element. You can then set how many pixels or 20% as the height of the gap element.
To get your 4 images into a fullwidth tow, please click on the row settings and make sure that column container is disabled and marginless columns is enabled. Then you will have this: http://prntscr.com/9b7fla
Perhaps you can try this: https://drive.google.com/open?id=0B4dpH_Gw-gtZcVdGQnFXYlBvNm8 sample template which you can upload in the layouts tab > templates and add it as block.
Hope this helps.
December 6, 2015 at 8:42 pm #694842Thanks for your patience and helpful guide. I am building up the skeleton now. I am uploading my screenshot. I require a white padding to let the images have some breathing space. How can I do it?
December 6, 2015 at 9:14 pm #694863Hello There,
Please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS
.x-column .x-img { margin: 0 auto; padding: 2px; padding-right: 0px; } .x-column:last-child .x-img{ padding-right: 2px; }
Hope this helps. Please let us know how it goes.
December 6, 2015 at 9:35 pm #694870Few pointers, help please.
1. How to adjust the horizontal placement of logo text?
2. The background image appears too small. It should occupy 80% of the screen (need to increase height). Leaving the 4 images at the bottom of the background image.
3. White spacing is good – Solved.
4. Upon applying your given template to CS, my original DEMO/Integrity/1 template is gone. I need them to appear right after my home page by allowing user to scroll below. Possible?
December 6, 2015 at 9:55 pm #694884Hello There,
1] You can adjust your logo in the customizer, Appearance > Customize > Header > Logo – Alignment and adjust the top logo alignment from there.
2] Please edit your section and make sure to insert a top and bottom padding of 10%. This will increase the height of the section. Please keep in mind that background images do not display the fullwidth because it is positioned at the very center of the section and it covers the whole area. It automatically adjust itself to avoid any white spaces around the background image.
3] Good to know.
4] You should have applied the page template as a block. When you select “page”, it replaces the whole content which is what had happen to your site. If in anyway, you no longer have it, you may try this page template as a page instead.
https://drive.google.com/file/d/0B4dpH_Gw-gtZcDF2RDNPZHFIb3c/view?usp=sharingAnd please do not forget to insert the custom css in the settings tab, Settings > Custom CSS
.white-text { color: #fff; } .x-column .x-img { margin: 0 auto; padding: 2px; padding-right: 0px; } .x-column:last-child .x-img{ padding-right: 2px; }
Hope this helps.
December 6, 2015 at 10:32 pm #694915Thank you so much and appreciate for your help. I am glad to have chosen X themes. Your support is rock solid.
I am good for now. Please proceed to close this thread.
Cheers!
December 6, 2015 at 10:35 pm #694923You’re soo much welcome! Cheers!
-
AuthorPosts