Full width image

[[email protected]]

hi there,

i would like to have a full width image at the top of each page

i have done the following:

1) create a new row and use the image as background image (using stretch row function)

Results: the image is full width on desktop, but on mobile, the image doesn't scale to the mobile screen, as such both sides of the image is cropped off

2) use element 'Single image' to put the image

Result, even if i select stretch row function, the image is not full width

Please help

i have attached a few images
a) (Blue arrow shows the full width image i did using option 1)
b) second image without arrows show the same image on mobile (both sides are cropped off)
c) using 'Single image' element. image is not full width

thank you

Add New Note to this Reply

[Tracy Bui]

Hi,

Thanks for contacting us.

Please give us your website's URL and admin account privately via checking Set as private reply checkbox.

We will check your site directly.

Thank you.

Tracy

Add New Note to this Reply

[[email protected]]

This reply has been marked as private.

Add New Note to this Reply

[Jackie]

Hi Again.

Thank you for feedback us.

We have helped you make the full-width image on the top of this page http://dormatic.loginmediademo.com/gilgen-cms/. Please check the page again.

With another page, we can't find the URL of this link.

Please check it and give us the link have that issue.

We will help you check that.

Thank you.

Jackie.

Add New Note to this Reply

[[email protected]]

hi, i dont understand.

it was already full width to begin with.

my issue is that, when it is full width, it doesnt scale properly on mobile (image attached)

pls help. thanks

Add New Note to this Reply

[Tracy Bui]

Hi again,

Thanks for your feedback.

It is the default view of the background image on the mobile device.  The background needs to cut to appropriate on the mobile.

Best Regards,

Tracy

Add New Note to this Reply

[[email protected]]

Hi, okay in that case, if i need it to be scaled according when using mobile, do you have any solution?

i tried to use single image which does scale, but how do i make it full width? (i selected full width option but it still doesnt show completely full width - where the image covers the screen entirely)

please let me know soon thank you

Marcus

Add New Note to this Reply

[Tracy Bui]

Hi again, marcus

Thanks for getting back to us.

We helped you to add the Custom CSS segment to help the image which can display full width on the mobile devices.

You can check it again.

Thanks.

Tracy

 

Add New Note to this Reply

[[email protected]]

Hi there, thank you very much for this.

next step, as i have over 40-50 pages of this?
can i know what is the custom css code to put?

so i can put it for the rest of the pages myself without having to ask u again. thank you

marcus

Add New Note to this Reply

[Tracy Bui]

Hi again,

We used this Custom CSS segment to help you:

.yolo-full-width {

padding-left: 0px!important;

}

@media screen and  (max-width: 480px) {

.vc_column-inner.vc_custom_1506392420030 {

padding-top: 85px !important;

padding-bottom: 85px !important;

}

}

we added on Theme Options > Custom CSS& Script > Custom CSS.

but each page has a different class so you need to replace this class    .vc_column-inner.vc_custom_1506392420030 to your class which is suitable your page.

Best Regards,

Tracy

Add New Note to this Reply

[[email protected]]

hi there,

how do i assign a page class?
as all the future pages will use this class.

thanks

Add New Note to this Reply

[Tracy Bui]

hi again,

You need to know the HTML and CSS knowledge to change because each page has a different class.

Please give us the pages which you want to change the background image, we will help you to check if possible.

Thanks.

Tracy

Add New Note to this Reply

[[email protected]]

Hi there,

not sure what happened but now all of the pages i have developed, on top of the page cannot be seen on the front end.

on the backend i have a portion at the top of the page, but on the frontend, it seems like the whole area is hidden.

pls see attached screenshot of

1) the frontend where the area cant be seen

2) backend where the element is being built.

this has happened for all pages. pls tell me what is the issue.

thank u

 

Add New Note to this Reply

[Tracy Bui]

Hi,

Thanks for contacting us.

Please give us the link of page which you want to focus directly. We will help you to check this issue.

Thank you.

Tracy

Add New Note to this Reply

[[email protected]]

This reply has been marked as private.

Add New Note to this Reply

[Author]

Posts