• szurhellen

    (@szurhellen)


    I am using the Ares theme on this test site: https://womeninvestornetwork.com/

    I have set up three images in the slider. I sized them as 1024 x 683. The tops of the images are being cut off when they appear in the slider. I would like for all of the faces to be visible in the image. Any advice would be greatly appreciated! As far as I can tell (not an expert), this is the CSS code controlling the slider images:

    .camera_wrap a, .camera_wrap img,
    .camera_wrap ol, .camera_wrap ul, .camera_wrap li,
    .camera_wrap table, .camera_wrap tbody, .camera_wrap tfoot, .camera_wrap thead, .camera_wrap tr, .camera_wrap th, .camera_wrap td
    .camera_thumbs_wrap a, .camera_thumbs_wrap img,
    .camera_thumbs_wrap ol, .camera_thumbs_wrap ul, .camera_thumbs_wrap li,
    .camera_thumbs_wrap table, .camera_thumbs_wrap tbody, .camera_thumbs_wrap tfoot, .camera_thumbs_wrap thead, .camera_thumbs_wrap tr, .camera_thumbs_wrap th, .camera_thumbs_wrap td {
    	background: none;
    	border: 0;
    	font: inherit;
    	font-size: 100%;
    	margin: 0;
    	padding: 0;
    	vertical-align: baseline;
    	list-style: none;
    }
    
    .camera_wrap {
    	direction: ltr;
    	display: none;
    	float: left;
    	position: relative;
    	z-index: 0;
    }
    
    .camera_wrap img {
    	max-width: none !important;
    }
    
    .camera_fakehover {
    	height: 100%;
    	min-height: 60px;
    	position: relative;
    	width: 100%;
    	z-index: 1;
    }
    
    .camera_wrap {
    	width: 100%;
    }
    
    .camera_src {
    	display: none;
    }
    
    .cameraCont, .cameraContents {
    	height: 100%;
    	position: relative;
    	width: 100%;
    	z-index: 1;
    }
    
    .cameraSlide {
    	bottom: 0;
    	left: 0;
    	position: absolute;
    	right: 0;
    	top: 0;
    	width: 100%;
    }
    
    .cameraContent {
    	bottom: 0;
    	display: none;
    	left: 0;
    	position: absolute;
    	right: 0;
    	top: 0;
    	width: 100%;
    }
    
    .camera_target {
    	bottom: 0;
    	height: 100%;
    	left: 0;
    	overflow: hidden;
    	position: absolute;
    	right: 0;
    	text-align: left;
    	top: 0;
    	width: 100%;
    	z-index: 0;
    }
    
    .camera_overlayer {
    	bottom: 0;
    	height: 100%;
    	left: 0;
    	overflow: hidden;
    	position: absolute;
    	right: 0;
    	top: 0;
    	width: 100%;
    	z-index: 0;
    }
Viewing 1 replies (of 1 total)
  • I see this as well, in both the free and Pro versions.

    I find that the slider does not cut off image tops in mobile view but it does do so in a regular desktop size browser. I try to leave empty room at the top and bottom of the photos to compensate for this.

    Another tip, the demo photo that comes with the Ares free theme has a particular size and aspect ratio. it still gets cut off (as you’ve found out), but it is a good starting point for photo sizing/cropping.

Viewing 1 replies (of 1 total)
  • The topic ‘Ares Theme: Slider cutting off tops of images’ is closed to new replies.