New To Website Building. Need Direction

Support
#1

Hi everyone! I’m new to website building and need to get pointed in the right direction. I have watched many of the video tutorials but I still can’t seem to get the foundation.

Here is a link to what i would like my website look like:

https://pro.photo/design/storied/demo

I’ve been playing with cornerstone but I cant seem to get it to look like the above demo.

Any direction and tips would be extremely appreciated.

Thanks!

#2

Hi…are you using X theme pro or X (need to know this for the header and footer part)

Also dependant on the X version you’re using…the way to go would be like this:

For the main section with the 4 columns of images:
Add a section - then split the section into 4 columns
In each column add the image element and drop the image into it

The ‘button’ over the image can be achieved by adding a button from the elements or by adding some css (but as you’re new to website building) adding a button will be easier.

Just one tip - I would suggest you also try and learn a little CSS as well. 90% is plain easy…

So share you X version please so I or anyone else can help you out a bit more

1 Like
#3

Thank you for that! I’m using “X”. I have tried doing a (4) column add dropping the picture in but then the images are not long enough vertically.

https://rb.photography/wp-content/uploads/2017/10/Screen-Shot-2017-10-09-at-10.08.24-AM.png

I’m looking trying to achieve a full screen layout, but after some research it looks like full screens are not currently supported. My other option to achieve this is by creating a one page slider, but then I loose the responsiveness of the page on mobile devices.

#4

You can add a full screen height for a section by adding 100vh in css

#x-section-1 {
min-height: 100vh;
}

You need to make sure that you have the right section number though. You need to find this in your source code.
But if you don’t know how to find this you could add this to your inline css (screenshot shows where:

min-height: 100vh;

#5

Thank you again! To get the images to fill the vertical, do I need to resize on export?

I’ll play around with it and hopefully i can get it working the way I like.

#6

Not sure what you mean by Need to resize on export?

#7

I’m starting to get the hang of things. What I was doing initially with my images was dragging from my media library to the section. The images were not filling the columns so after some css it was working.

I used the following code css on both the section and column to fullscreen images:

min-height:100vh;

To import the images I used the following code:
background:url(xxxxxx) no-repeat; background-size:cover; background-position:center

So far its looking right but once you start resizing the windows, things seem to get funky. Is there another line of code I need to use? Here are few screen shots to show the behavior i’m experiencing.

https://rb.photography/wp-content/uploads/2017/10/Screen-Shot-2017-10-10-at-12.31.11-PM.png

https://rb.photography/wp-content/uploads/2017/10/Screen-Shot-2017-10-10-at-12.32.19-PM.png

https://rb.photography/wp-content/uploads/2017/10/Screen-Shot-2017-10-10-at-12.32.37-PM.png

https://rb.photography/wp-content/uploads/2017/10/Screen-Shot-2017-10-10-at-12.32.55-PM.png

#8

Hi,

By setting the background size to cover is will scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.

You have few more options but each one has a limitation.

You can check the links below.

https://www.w3schools.com/cssref/css3_pr_background-size.asp

demo - https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

Hope that helps

#9

Thanks Paul!, I figured out the issue, I forgot to set the individual columns to min-height:100vh. Once I corrected that, the images were fitting better to screen.

My issue now is the layout of the response. Once I go into tablet size the column are still 4 wide and not 2 wide (my expectations). Whats causing this to act funky? If it makes any difference, i upgraded to pro to take advantage of the editable headers and footers. Attached are screen shots:

https://rb.photography/wp-content/uploads/2017/10/Screen-Shot-2017-10-12-at-12.08.10-AM.png

https://rb.photography/wp-content/uploads/2017/10/Screen-Shot-2017-10-12-at-12.08.23-AM.png

Thanks!

#10

Hi There,

Please provide your URL so we can provide you a tailored solution.

Thanks!

#11

Thanks for the response, i’ve decided to change the layout of my site.

#12

You’re welcome. Just want to add another way to achieve this without CSS and also takes into account mobile views.

Thanks.

#13

Thank you christian_y! i’ll play with it!

#14

Let us know how it goes.

Thank you.